现代CSS清除浮动

清除浮动

排除远古时代的hack解决方案，比如那些要兼容IE6~8的方法。其实总结起来，大致有三种方法：

overflow

原理解析：块级格式上下文规定了页面必须自动包含突出的浮动元素！

而overflow属性值不是visible的元素就会建立块级格式上下文，所以设置overflow:hidden和auto都是可以清除浮动的。

例子： 给浮动元素的父元素设置overflow。

::after伪元素

使用伪元素在浮动元素的父元素的末尾添加一个::after伪元素，使用特定的样式进行清除浮动：

例子：

.float-parent::after {
 content: "";
 display: block;
 clear: both;
}

末尾添加无意义标签

这个原理跟伪元素一样，只是为了兼容不支持伪元素的浏览器，现在一般不再使用了。

例子：

<br/ style="clear: both;">