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

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

Question 1: 上面的代碼的能夠實現清除浮動的問題嗎？

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

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

Question 2: content屬性的內容能改成空嗎content: ”;？

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

更改后的代碼如下：

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

Question 3: display屬性的內容能改成 inline 或 inline-block 嗎？

Answer： 不能。 我們要明白float屬性的初衷————讓文字環繞圖片展示。翻譯成另外一句話：內聯級別的元素會環繞浮動元素展示。那么為什么 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; 的區別。

left : 不與左浮動的元素產生邊界接觸；
right : 不與右浮動的元素產生邊界接觸；
both : 不與左浮動和右浮動的元素產生邊界接觸；

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

如果有如下代碼：

<style>
.clear-left { clear:left; }
.clear-right { clear:right; }