CSS 清除浮動

clear 屬性用於設定元素哪一側不允許有其他浮動元素（而並非取消元素的浮動）。

例子：

#div2{
    float: left;
    clear: both;
}

設想這麽一種情況，一個div包含的內容都設置了浮動，那麽內容就脫離文檔流，將導致div實際沒包含任何“內容”，如下左圖所示：

如何像右圖那樣在視覺上div包含內容呢？尤其在div要做邊框顯示的時候必須包含內容。

通常有兩種方法解決此問題：

一、添加一個無任何內容的div並對它做浮動：

<div class="clear"></div>

.clear{
    clear: both;
}

這是為了布局效果而添加的無意義的標簽，事實上很多網站也采取了這種策略，但這種策略會留下無意義的“垃圾”標簽。

二、對容器DIV也進行浮動，使之成為一個塊級元素。

如此一來達到了目的，但下一個元素會受到該浮動元素的影響。事實上，有人采取的策略是將文檔中所有的元素都進行浮動處理，然後在頁腳的地方對有意義的元素對這些浮動進行清理，以達到布局的目的。

CSS 清除浮動 clear 屬性