关于浮动与清除浮动

Posted 2020-08-03 想旅游咯

页面布局方式，主要包含：文档流、浮动层、float属性。

☞html页面的标准文档流(默认布局)是：从上到下，从左到右，遇块(块级元素)换行。

☞浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

☞float属性包括left(元素向左浮动)、right(元素向右浮动)、 none(默认值)、(inherit)从父元素继承float属性。

但是浮动有时候会很烦，为什么说很烦呢？

举个栗子吧

浮动对页面的影响：如果一个父盒子中有一个子盒子，并且父盒子没有设置高度，子盒子在父盒子中浮动，因为float会脱离文档流，这样就导致了父元素的height为0 ，下面的元素会自动补位。故需要进行清除浮动。

清楚浮动的方式有很多种，那就总结一下吧

1、使用额外标签法：在浮动盒子下面添加一个标签，使用clear:both来清楚浮动

 这里我们发现很明显的缺点：父盒子还是不会直接显示，而且这种浮动方式会增加页面的标签<div class="clearfix"></div>，故一般情况下不采用这种清楚浮动方式

 2、使用CSS的:after伪元素

 

说明：给浮动元素的容器添加一个clearfix的class类，然后给这个class添加一个:after伪元素实现元素末尾添加一个空的块级元素（这个元素的高为0，行高也为0，并且这个元素清楚了浮动） 。为了IE6和IE7浏览器，要添加一条zoom:1;触发haslayout。

  3、使用CSS的overflow属性

先找到浮动盒子的父元素，再在父元素添加添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

 

 注意：一般情况下也不使用这种清楚方式，因为overflow:hidden有一个属性，离开了这个元素所在的区域以后会被隐藏

 

综上所述：使用CSS的:after伪元素是最佳选择

 

关于浮动更多内容可以参考http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html