html——float与position的兼容性探究

Float属性

float的属性值有none、left、right，有几个要点：

1. 只有横向浮动，并没有纵向浮动。
2. 当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
3. 会将元素的display属性变更为block。
4. 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。
5. 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

与position的兼容性问题

1）元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

<div style="position:relative; float:right; left:50px; top:10px;">div</div>

左图中的div是没有设置top、left值的，而右边则设置了50px的偏移。

2）元素同时应用了position: absolute及float属性，则float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">
我是一个应用了position：absolute和float：left的DIV，不过我还是在浏览器的右边，没有浮动到左边。
</div>

3）第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

<div style="position: absolute; left:10px; top: 10px;">
    我是一个应用了position：absolute的DIV。
</div>
<div style="float:left; background: red; width: 300px; height: 150px; ">
    我是float：left的DIV
</div>

回顾：如果你不将float的元素的position设置成relative的话，你想通过设置float元素的z-index来的达到覆盖position:absolute是无效的。同理，float元素下面存在position: absolute的子元素，如果你不将float的元素的position设置成relative的话，absolute元素是不会定位到float元素的。

4）同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。
常用的清除浮动的方法有两种：

1. 通过在容器中添加一个标签，设置该标签的样式为 clear: both
2. 容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;">
    <div style="float: left; position: absolute;">我是DIV</div>
    <div style="clear: both;"></div>
<div>

下面是总结：