下面這段**是用來清除浮動帶來的高度塌陷問題
.clearfix:before
question 1: 上面的**的能夠實現css清除浮動的問題嗎?
answer: can't. 因為clear屬性只能控制元素本身與前面的浮動元素的關係。在本例中,使用:before
偽元素明顯位於所有子元素之前,故而clear屬性不會因後面的浮動元素產生任何作用效果。 clear屬性的官方定義可以檢視css文件 。那麼應該如何修改呢?將:before
換成:after
即可。最終**如下:
.clearfix:after
question 2:content
屬性的內容能改成空嗎content: '';
?
answer: yes. 因為設定了height:0;
和visibility: hidden
。 如果設定了content:'';
,那麼height:0;
和visibility: hidden
和 可以去掉嗎? 當然可以,因為塊元素沒有內容就不會有高度咯。
更改後的**如下:
.clearfix:after
question 3:display
屬性的內容能改成inline
或inline-block
嗎?
answer: 不能。 我們要明白float屬性的初衷————讓文字環繞展示。翻譯成另外一句話:內聯級別的元素會環繞浮動元素展示。那麼為什麼display: block;
可以解決高度塌陷的問題呢。 因為clear
屬性的含義是不讓元素本身與浮動元素的邊界相鄰。如果塊級元素要不與塊級元素邊界相鄰,只有換到下一行展示。也正為換行,才將父元素到高度撐開了,正式上面的**解決高度塌陷的原理。
question 4: 下面到div元素會存在高度塌陷問題嗎?
```歷史的天空
```answer: 存在。為什麼呢?要知道 clear屬性中,clear:left;
和clear:right;
的區別。
所以上面的**不會解決高度塌陷到問題。
如果有如下**:
"> .clear-left
.clear-right
.fl
.fr
.box 12
3123
å
你會發現,兩個div的展示效果是相同的。也就是說,如果前面同時存在左浮動和右浮動到元素,那麼clear屬性值無論設成left
還是right
都無關緊要。 反過來想,如果clear屬性設成both
,那麼無論前面的元素是左浮動還是右浮動,都無關緊要。這也是clearfix通常設定clear:both;
的原因。
注意一點,我們一直在說 解決 高度塌陷都問題,從來沒有說清除浮動。 是因為本質上,浮動並沒被清除,我們只是利用clear屬性解決了浮動元素帶來的父級元素高度塌陷問題。而且clear屬性影響也只是設定clear屬性的元素本身,而不是浮動元素。
css基礎 清除浮動的一些方法及區別
為什麼要清楚浮動?方式一 使用overflow屬性來清除浮動 ovh 先找到浮動盒子的父元素,再在父元素中新增乙個屬性 overflow hidden,就是清除這個父元素中的子元素浮動對頁面的影響.注意 一般情況下也不會使用這種方式,因為overflow hidden有乙個特點,離開了這個元素所在的...
利用css清除浮動的方法
在網頁搭建過程中,浮動是布局中必不可少的。但是當子元素浮動後,其父級元素就會出現高度不夠的情況。這時候,我們需要去清除浮動。下面,我就總結了一些清除浮動的方法。1 新增乙個空的div,給這個空的div設定css屬性即 clear both。這樣的方法瀏覽器相容比較好,而且比較簡單。但是這樣做頁面中就...
Parallels Desktop 的一些問題
並且無法進行su命令,提示 authentication failure。這個問題產生的原因是由於系統預設是沒有啟用root使用者的,需要我們手工進行操作,在命令列介面下,或者在終端中輸入如下命令 sudo passwd password 你當前的密碼 enter new unix password...