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