下面這段代碼是用來(lái)清除浮動(dòng)帶來(lái)的高度塌陷問(wèn)題
.clearfix:before {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Question 1: 上面的代碼的能夠?qū)崿F(xiàn)清除浮動(dòng)的問(wèn)題嗎？
Answer： Can't. 因?yàn)閏lear屬性只能控制元素本身與前面的浮動(dòng)元素的關(guān)系。愛(ài)掏網(wǎng) - it200.com在本例中，使用:before偽元素明顯位于所有子元素之前，故而clear屬性不會(huì)因后面的浮動(dòng)元素產(chǎn)生任何作用效果。愛(ài)掏網(wǎng) - it200.com clear屬性的官方定義可以查看CSS文檔 。愛(ài)掏網(wǎng) - it200.com那么應(yīng)該如何修改呢？將:before換成:after即可。愛(ài)掏網(wǎng) - it200.com最終代碼如下：
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Question 2: content屬性的內(nèi)容能改成空嗎content: '';？
Answer： Yes. 因?yàn)樵O(shè)置了 height:0; 和 visibility: hidden。愛(ài)掏網(wǎng) - it200.com 如果設(shè)置了content:'';，那么 height:0; 和 visibility: hidden和 可以去掉嗎？ 當(dāng)然可以，因?yàn)閴K元素沒(méi)有內(nèi)容就不會(huì)有高度咯。愛(ài)掏網(wǎng) - it200.com
更改后的代碼如下：
.clearfix:after {
content: "";
display: block;
clear: both;
}
Question 3: display屬性的內(nèi)容能改成 inline 或 inline-block 嗎？
Answer： 不能。愛(ài)掏網(wǎng) - it200.com 我們要明白float屬性的初衷————讓文字環(huán)繞圖片展示。愛(ài)掏網(wǎng) - it200.com翻譯成另外一句話(huà)：內(nèi)聯(lián)級(jí)別的元素會(huì)環(huán)繞浮動(dòng)元素展示。愛(ài)掏網(wǎng) - it200.com那么為什么 display: block;可以解決高度塌陷的問(wèn)題呢。愛(ài)掏網(wǎng) - it200.com 因?yàn)?clear屬性的含義是不讓元素本身與浮動(dòng)元素的邊界相鄰。愛(ài)掏網(wǎng) - it200.com如果塊級(jí)元素要不與塊級(jí)元素邊界相鄰，只有換到下一行展示。愛(ài)掏網(wǎng) - it200.com也正為換行，才將父元素到高度撐開(kāi)了，正式上面的代碼解決高度塌陷的原理。愛(ài)掏網(wǎng) - it200.com
Question 4: 下面到div元素會(huì)存在高度塌陷問(wèn)題嗎？
歷史的天空
Answer： 存在。愛(ài)掏網(wǎng) - it200.com為什么呢？要知道 clear屬性中， clear:left; 和 clear:right; 的區(qū)別。愛(ài)掏網(wǎng) - it200.com
left : 不與左浮動(dòng)的元素產(chǎn)生邊界接觸；
right : 不與右浮動(dòng)的元素產(chǎn)生邊界接觸；
both : 不與左浮動(dòng)和右浮動(dòng)的元素產(chǎn)生邊界接觸；
所以上面的代碼不會(huì)解決高度塌陷到問(wèn)題。愛(ài)掏網(wǎng) - it200.com
如果有如下代碼：
1
2
3
1
2
3
你會(huì)發(fā)現(xiàn)，兩個(gè)div的展示效果是相同的。愛(ài)掏網(wǎng) - it200.com也就是說(shuō)，如果前面同時(shí)存在左浮動(dòng)和右浮動(dòng)到元素，那么clear屬性值無(wú)論設(shè)成left 還是right都無(wú)關(guān)緊要。愛(ài)掏網(wǎng) - it200.com 反過(guò)來(lái)想，如果clear屬性設(shè)成 both，那么無(wú)論前面的元素是左浮動(dòng)還是右浮動(dòng)，都無(wú)關(guān)緊要。愛(ài)掏網(wǎng) - it200.com這也是clearfix通常設(shè)置 clear:both;的原因。愛(ài)掏網(wǎng) - it200.com
注意一點(diǎn)，我們一直在說(shuō) 解決 高度塌陷都問(wèn)題，從來(lái)沒(méi)有說(shuō)清除浮動(dòng)。愛(ài)掏網(wǎng) - it200.com 是因?yàn)楸举|(zhì)上，浮動(dòng)并沒(méi)被清除，我們只是利用clear屬性解決了浮動(dòng)元素帶來(lái)的父級(jí)元素高度塌陷問(wèn)題。愛(ài)掏網(wǎng) - it200.com而且clear屬性影響也只是設(shè)置clear屬性的元素本身，而不是浮動(dòng)元素。愛(ài)掏網(wǎng) - it200.com
為了學(xué)習(xí)工作與休閑娛樂(lè)互不沖突，現(xiàn)新建圈【碼農(nóng)茶水鋪】用于程序員生活，愛(ài)好，交友，求職招聘，吐槽等話(huà)題交流，希望各位大神工作之余到茶水鋪來(lái)喝茶聊天。愛(ài)掏網(wǎng) - it200.com群號(hào):582735936
了解更多