现代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;">