“使用浮動元素包含浮動元素這樣的布局方式有一個潛在的缺點，即你的頁面是否能夠一直保持一致的展現(xiàn)效果將取決于瀏覽器的實現(xiàn)是否保持一致。特別是當(dāng)浮動元素是一個更為復(fù)雜的布局中的一部分的話，將變得更加不堪一擊�！�
Clearing the floats
“浮動元素之后的元素會自動圍繞該浮動元素。如果你不希望這樣，你可以為這些元素應(yīng)用‘clear’屬性。該屬性有4種設(shè)值：clear: left, clear: right, clear: both or clear: none”
有很多技巧可以做到清理浮動元素，但不引入額外的無語義標(biāo)簽。下面3種是比較常見的做法： a) 將容器元素一起浮動 b) 在容器元素上使用 overflow: hidden c) 使用:after這樣的css偽類。
“插入一個清理元素是使容器正確包裹所有浮動元素的標(biāo)準(zhǔn)做法，這樣做具有將容器底部邊緣‘拖拉’以包裹所含元素的效果。”
“對于基于浮動設(shè)計的布局來說，一個常見的問題就是浮動元素的容器不會自動伸展來包含浮動元素。如果你希望在所有的浮動元素的外面加上邊框（例如，在容器元素上加上邊框），這樣你必須顯示的命令瀏覽器來伸展容器。你可以是用overflow method方法�！�
使用:after 想像一下我們使用:after來插入一個點號，并且設(shè)置它的屬性{clear: both;}。這就是所有你需要做的事情，但是沒有人會接受容器底部有那么一絲空隙，所以我們還要設(shè)置{height: 0;} 和 {visibility: hidden;} 來保證嚴(yán)絲合縫。
|
