下面這段代碼是用來清除浮動帶來的高度塌陷問題

.clearfix:before {    content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;}

Question 1: 上面的代碼的能夠?qū)崿F(xiàn)清除浮動的問題嗎？

Answer： Can't. 因為clear屬性只能控制元素本身與前面的浮動元素的關(guān)系。在本例中，使用:before偽元素明顯位于所有子元素之前，故而clear屬性不會因后面的浮動元素產(chǎn)生任何作用效果。 clear屬性的官方定義可以查看CSS文檔 。那么應(yīng)該如何修改呢？將:before換成:after即可。最終代碼如下：

.clearfix:after {    content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;}

Question 2: content屬性的內(nèi)容能改成空嗎content: '';？

Answer： Yes. 因為設(shè)置了 height:0; 和 visibility: hidden。 如果設(shè)置了content:'';，那么 height:0; 和 visibility: hidden和 可以去掉嗎？ 當(dāng)然可以，因為塊元素沒有內(nèi)容就不會有高度咯。

更改后的代碼如下：

.clearfix:after {    content: "";     display: block;    clear: both;}

Question 3: display屬性的內(nèi)容能改成 inline 或 inline-block 嗎？

Answer： 不能。 我們要明白float屬性的初衷————讓文字環(huán)繞圖片展示。翻譯成另外一句話：內(nèi)聯(lián)級別的元素會環(huán)繞浮動元素展示。那么為什么 display: block;可以解決高度塌陷的問題呢。 因為 clear屬性的含義是不讓元素本身與浮動元素的邊界相鄰。如果塊級元素要不與塊級元素邊界相鄰，只有換到下一行展示。也正為換行，才將父元素到高度撐開了，正式上面的代碼解決高度塌陷的原理。

Question 4: 下面到div元素會存在高度塌陷問題嗎？

<style>    .clearfix::after {        content: "";        display: block;        clear:left;    }    img { float: right; }</style><div class="clearfix">    <span>歷史的天空</span>    <img src="images/naruto.gif"></div>

Answer： 存在。為什么呢？要知道 clear屬性中， clear:left; 和 clear:right; 的區(qū)別。

• left : 不與左浮動的元素產(chǎn)生邊界接觸；
• right : 不與右浮動的元素產(chǎn)生邊界接觸；
• both : 不與左浮動和右浮動的元素產(chǎn)生邊界接觸；

所以上面的代碼不會解決高度塌陷到問題。

如果有如下代碼：

<style>    .clear-left { clear:left; }    .clear-right { clear:right; }    .fl { float: left;}    .fr { float: right;}    .box {         height: 30px; width: 30px;        background: yellowgreen;        margin: 5px;    }</style><div>    <div class="box fl">1</div>    <div class="box fr">2</div>    <div class="box clear-left">3</div></div><div>    <div class="box fl">1</div>    <div class="box fr">2</div>    <div class="box clear-right">3</div></div>

你會發(fā)現(xiàn)，兩個div的展示效果是相同的。也就是說，如果前面同時存在左浮動和右浮動到元素，那么clear屬性值無論設(shè)成left 還是right都無關(guān)緊要。 反過來想，如果clear屬性設(shè)成 both，那么無論前面的元素是左浮動還是右浮動，都無關(guān)緊要。這也是clearfix通常設(shè)置 clear:both;的原因。

注意一點，我們一直在說 解決 高度塌陷都問題，從來沒有說清除浮動。 是因為本質(zhì)上，浮動并沒被清除，我們只是利用clear屬性解決了浮動元素帶來的父級元素高度塌陷問題。而且clear屬性影響也只是設(shè)置clear屬性的元素本身，而不是浮動元素。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。