詳解利用clear清除浮動的一些問題解決
下面這段代碼是用來清除浮動帶來的高度塌陷問題
.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; }
.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>
你會發現,兩個div的展示效果是相同的。也就是說,如果前面同時存在左浮動和右浮動到元素,那麼clear屬性值無論設成left 還是right都無關緊要。 反過來想,如果clear屬性設成 both,那麼無論前面的元素是左浮動還是右浮動,都無關緊要。這也是clearfix通常設置 clear:both;的原因。
注意一點,我們一直在說 解決 高度塌陷都問題,從來沒有說清除浮動。 是因為本質上,浮動並沒被清除,我們只是利用clear屬性解決了浮動元素帶來的父級元素高度塌陷問題。而且clear屬性影響也只是設置clear屬性的元素本身,而不是浮動元素。
作者:前端小攻略
原文:https://my.oschina.net/u/3972188/blog/3005233
![](https://pic.pimg.tw/zzuyanan/1488615166-1259157397.png)
![](https://pic.pimg.tw/zzuyanan/1482887990-2595557020.jpg)
※Bayesian Personalized Ranking 演算法解析及Python實現
※Oracle數據優化比較全
TAG:程序員小新人學習 |