为什么要清除浮动
我们为什么需要浮动元素，是为了布局。块级元素的显著特点是独占一行，但是为了布局，我们需要在一行布局多个块级元素。为了达到这个目的，我们使用元素浮动。
这里关于浮动元素具体表现，参考这篇文章: CSS浮动(float,clear)通俗讲解。
但是，在使用float浮动元素布局的前提下，有些情况我们需要清除浮动，换句话说，就是想要浮动带来的布局便利性，并且不想要相关的副作用。例如包含元素的高度塌陷，就是具体的表现之一。
当我们想要容器例如<div>浮动起来，就需要给容器添加一个浮动属性——float，float属性取值为“left”或“right”，但是当容器浮动起来时，就会带来一个副作用，那就是在非IE浏览器（如Firefox）下，当容器高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出或高度塌陷，为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。
浮动溢出
清除浮动的办法
清除浮动的办法主要分为两类，第一类就是在浮动容器的后面加了一个新的空容器，或者存在容器的话，在后面的容器中添加一条CSS属性，clear:both;即可。但是如果仅仅是为了清除浮动，而添加新的<div>，丢失了语义化的真谛，产生大量无意义的标签。不推荐。基于这种前提，推荐:after伪元素法，即在浮动元素后面添加一个新的元素，注意，这里仅仅在CSS里面操作。同时会触发IE的hasLayout布局，所有加上一条兼容性代码。
伪元素法
第二类就是触发BFC（块级格式化上下文）
继续介绍推荐的第二条方法：给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
总结
在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。
最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。
网友评论