這個原理倒是略之一二，但是很混亂。尤其是在父元素上添加了clearfix:after{clear:both;.....} 這樣的樣式之后，為什么父元素的高度就恢復(fù)了。這個不怎么能想通，麻煩大神幫忙解惑。
2 回答
慕森卡
TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個贊
對一個元素聲明clear:both，會將來自元素周圍的的浮動清除，舉一個簡單的例子就是當(dāng)先聲明一個元素向左浮動時，那么這個元素的右邊就會留出一部分空白，如果這個時候空間可以容下該元素的下一個元素的大小，那么由于此元素聲明過浮動向左，那么下一個元素就會自動彌補(bǔ)留下的空間。那么相對這個補(bǔ)缺的元素（本身沒有聲明浮動），它有一個來自他左方的浮動，如果這個時候?qū)@個補(bǔ)缺的元素聲明clear: both;那么它就會忽略上一個元素的浮動聲明而不去補(bǔ)之前的空缺。
回到題主的問題，由于瀏覽器是按順序render（這個我也不好翻譯。。）元素的，對#div1和#div2都聲明了浮動向左，那么這個時候#div1之前是沒有其他浮動元素的，clear：both并不會對之后的#div2產(chǎn)生影響，而相對#div2，由于它之前的#div1聲明向左浮動，也就給#div2留出了一部分空間，那么由于#div1聲明的向左浮動，#div2默認(rèn)會自動補(bǔ)全，這個時候再對#div2聲明clear:both就會起作用，它就跑到下面去了。
至于樓上的第一個例子為什么管用，是因?yàn)樗拗屏藀arent元素的寬為100pixel,即使#div1向左浮動，也沒有空間給#div2補(bǔ)全了，所以#div2只能跑下面去。
森欄
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個贊
浮動的初衷是讓文字環(huán)繞圖片用的，即 使用float名值對后，后面元素內(nèi)容小于 空缺大小的元素會自動往上補(bǔ)進(jìn)。
后來由于開發(fā)者注意到 浮動元素中間沒有間隙于是就用來做布局了。 那么問題來了：當(dāng)父盒子（未設(shè)置高度）中有兩個浮動的盒子時，這兩個子盒子脫離文檔流，父盒子高度坍塌了，這時 我們衍生出了一個clear:both/left/right；名值對解決了這個問題。
在浮動元素后面加一個塊元素，定義一個名值對clear：both；坍塌的父盒子會找到具有這個屬性的元素，并且與這個元素同高 ，你說的這個.clearfix:after{clear:both;.....} 其中clearfix是類名，加了個塊狀的偽元素而已 作用跟直接加塊元素沒區(qū)別
添加回答
舉報
0/150
提交
取消