css中float的前世今生

1，浮动的历史

在早期网页制作过程中，为了达到图片word文档那样的文字环绕效果，不至于图片和文字不在一行显示，图片占据一行，文字占据一行，这样的样式并不符合大众的审美观，浪费空间，所以w3c就创建了float这个css属性。

2，浮动的包裹性和破坏性

破坏性是指子级元素设置浮动后将会跳出父级元素，父级元素将不被浮动元素所撑开，除非清除浮动带来的影响。

包裹性是指子级元素设置浮动后，并且父元素已经被清除浮动后将会将子元素包裹住，就像inline-block一样。

4，浮动在布局中的应用

(1)，双飞翼布局

图一

图二

双飞翼布局就是利用float和margin负值相结合的方式，将center定位到最中间，难点在于margin单位百分比的理解。

(2)，圣杯布局

图三

图四

圣杯和双飞翼区别：

二者都是三栏自适应布局方案，圣杯布局是需要结合相对定位，用到left属性，而双飞翼布局只需要使用浮动和margin定位，前者三栏布局是每栏相互独立，而后者是center占据是100%,left和right是浮在center上的。

(2)，两列布局

图五

图六

如图五图六所示，当左侧div左浮动，右侧div将会自动适应余下的宽度，当界面大小发生改变时，右侧div同样会随着变化，如果想让左右div中间有一个间距的话，我们可以用右侧div设置一个margin-left为：左侧div的宽度+间距。

如果想让左侧右侧同时自适应的话，我们可以让右侧元素BFC化，此时左侧元素div的marin-left才会有效，如果右侧div不BFC化的话，属于正常流，而浮动已经脱离正常流，所以此时它的margin-left是无效的。

5，清除浮动带来的影响的方法

(1)，使用clear:both

.father:after{/*IE7和IE6不识别*/

content:'';

display:block;

clear:both;

overflow:hidden;

height:0;

}

.father{

*zoom:1;/*兼容IE7*/

}

(2)，内部使用空标签

div{clear:both;}

缺点是多了一个空标签，无意义。

(3)，使用BFC

在子元素中使用overflow,position,inline-block,tabel-cell

(4)，使用table

.father:after{/*IE7和IE6不识别*/

content:'';

display:table;

clear:both;

}

.father{

*zoom:1;/*兼容IE7*/

}