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