清除浮动的几种方式

说到清除浮动之前，得先了解下BFC (Block formatting context)</font> “块级格式化上下文”，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用， 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器，它是一个独立的渲染区域。
形成 BFC 的条件
1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）。
BFC常见作用 ：
1、包含浮动元素
例如：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度坍塌，上下边界重合。这时就可以用bfc来清除浮动了。
2、不被浮动元素覆盖
例如： div浮动兄弟遮盖问题：由于一个块级元素发生了浮动，所以和一个未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。这时可以给未发生浮动的元素添加 overflow: hidden属性来触发BFC解决遮挡问题。
3、 BFC 会阻止外边距折叠
例如：margin塌陷问题：在标准文档流中，块级标签之间竖直方向的margin会以大的为准，这就是margin的塌陷现象。可以用overflow：hidden产生bfc来解决。

清除浮动的几种方式：
1、父级div定义伪类：after和zoom。

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}  
.clearfloat{zoom:1} 

2.给元素添加clear属性，或在结尾处添加空div标签clear:both（内墙法，外墙法同理）。
.clearfloat{clear:both}
3.父级div定义height（只适合高度固定的布局，要给出精确的高度）。
4.父级div定义overflow:hidden/auto，*zoom: 1。
5.设置父元素浮动 。
6.双伪元素（企业最常用）。

.cf:after，.cf:before {content: " "; display: table;}
.cf:after {clear: both;}

：before是因为table类型能生成独立的bfc，防止上边距塌陷。
：after负责清除浮动，防止父级高度塌陷；配合使用，代码少，效率高。