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