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