利用clear清除浮動的一些問題

2022-07-04 07:06:13 字數 1731 閱讀 2399

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

.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屬性的內容能改成inlineinline-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...