position跟display margin，collapse，overflow，float这些特性相互叠加后会怎样
发布网友
发布时间：2022-04-21 09:18
共1个回答
热心网友
时间：2022-04-21 10:48
一、'display'、'position' 和 'float' 的相互关系
首先我们先来看下这3个属性。
display 属性规定元素应该生成的框的类型。 block 象块类型元素一样显示，none 缺省值。象行内元素类型一样显示， inline-block 象行内元素一样显示，但其内容象块类型元素一样显示，list-item 象块类型元素一样显示，并添加样式列表标记（display 还有很多其他值设置，读者自行查找）。
position 属性规定元素的定位类型。 absolute表示生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位；fixed（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位；relative生成相对定位的元素，相对于其正常位置进行定位；static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
Float也是是一种布局方式，它定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 在布局过程中也经常会使用它来达到左右并排布局的效果。
那么这三种布局和框形成的关键特性( display )之间有什么关系呢，请看下面流程图：
转换对应表：
设定值计算值
inline-tabletable
inline, run-in, table-row-group, table-column, table-column-group, table-header-group,
table-footer-group, table-row, table-cell, table-caption, inline-blockblock
其他同设定值
总的来说，可以把它看作是一个类似优先级的机制， "position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，'display' 的值也需要调整； 其次，元素的 'float' 特性的值不是 "none" 的时候或者它是根元素的时候，调整 'display' 的值； 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display' 特性值同设置值。
这从另一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格。
1. 'display' 的值为 'none'
如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素不产生框。因此浮动和定位无效。
2. 'position' 的值是 'absolute' 或 'fixed'
否则，如果 'position' 的值是 'absolute' 或 'fixed'，框就是绝对定位的，'float' 计算后的值应该是 'none'，并且，'display' 会被按照上表设置。 框的位置将由 'top'，'right'，'bottom' 和 'left' 属性和该框的包含块确定。
也就是说，当元素是绝对定位时，浮动失效，'display' 会被按规则重置。
示例代码：
<script type="text/javascript">function getStyle(obj, style) { var _style = (style == "float") ? "styleFloat" : style; return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() { return arguments[0].charAt(1).toUpperCase(); })];}window.onload = function() { document.getElementById("info").innerHTML = "float : " + getStyle(document.getElementById("test"), "float") + "<br/>display : " + getStyle(document.getElementById("test"), "display");}</script><div id="test" style="position:absolute; float:left;display:inline;"></div><div id="info"></div>
上面代码中有一个既是绝对定位又是浮动的元素，以上代码可取出其 'display' 和 'float' 的计算值。
IE 中，'float' 值和 'display' 的特性值未发生变化，还是 "float: left; display: inline"。
其他浏览器中计算后的结果是："float: none; display: block"。
3. 'float' 的值不是 "none"
