CSS清除浮動問題,css如何清除浮動?

2022-07-05 07:12:07 字數 4546 閱讀 9315

1樓:羅州學茂學

嗨哥們你可以這樣

在head上加,讓ie8執行ie7的標準

我暈,我試了一下,是有效的,因為就算我不寫上面那段,ie8也是有效地。

你所指的margin

2樓:

它本來就是想達到跟清除浮動一樣的效果:父div隨著浮動的子div擴充套件,包容子div。

這**可用。只是它用了hack(zoom:1 ie專有屬性)相容ie6.0以下,不好通過w3c驗證。

除了清除浮動和上面的方法外, 還可以讓父div也浮動達到這效果。當然要看實際需要選用。

另:我不知道你說的「明顯不行」是指的什麼意思?它可以達到要的效果,只是裡面的雙引號是中文字元(可能是發帖需要),要改為英文字元。

css如何清除浮動?

3樓:長虹天靈

clear:both清除浮動

為了統一樣式,我們新建一個樣式選擇器css命名為「.clear」,並且對應選擇器樣式為「clear:both」,然後我們在父級「

」結束前加此div引入「」樣式。這樣即可清除浮動。

4樓:全建弼

css清除浮動可以理解為打破橫向排列。 清除浮動的關鍵字是clear,官方定義如下: 語法:

clear : none | left | right | both 取值: none :

預設值。允許兩邊都可以有浮動物件 left : 不允許左邊有浮動物件 right :

不允許右邊有浮動物件 both : 不允許有浮動物件 根據上邊的基礎,假如頁面中只有兩個元素div1、div2,它們都是左浮動,場景如下:此時div1、div2都浮動,根據規則,div2會跟隨在div1後邊,但仍然希望div2能排列在div1下邊,就像div1沒有浮動,div2左浮動那樣。

這時候就要用到清除浮動(clear)對於css的清除浮動(clear),一定要牢記:這個規則只能影響使用清除的元素本身,不能影響其他元素。具體做法:

要想讓div2下移,就必須在div2的css樣式中使用浮動。本例中div2的左邊有浮動元素div1,因此只要在div2的css樣式中使用clear:left;來指定div2元素左邊不允許出現浮動元素,這樣div2就被迫下移一行。

5樓:

網頁連結其實究其原因,就兩種原理清除與閉合,可以看下我寫的這個思路可能會清楚一點

css清除浮動的幾種方式

6樓:顧依萌

在清除浮動前我們要了解兩個重要的定義:

浮動的定義:使元素脫離文件流,按照指定方向發生移動,遇到父級邊界或者相鄰的浮動元素停了下來。

高度塌陷:浮動元素父元素高度自適應(父元素不寫高度時,子元素寫了浮動後,父元素會發生高度塌陷)

知道浮動和為什麼要清除浮動之後我們可以開始學習如何清除浮動了,這時候我們就需要用到清除浮動的屬性clear,

clear:left | right | both | none | inherit:元素的某個方向上不能有浮動元素

clear:both:在左右兩側均不允許浮動元素。

具體清楚浮動的方法主要一下幾種:

1、clear清除浮動(新增空div法)

在浮動元素下方新增空div,並給該元素寫css樣式: 12

2、方法:給浮動元素父級設定高度

我們知道了高度塌陷是應為給浮動元素的父級高度是自適應導致的,那麼我們給它的設定適當的高度就可以解決這個問題了。

缺點:在浮動元素高度不確定的時候不適用1234

3、方法:以浮制浮(父級同時浮動)

何謂「以浮制浮」呢?就是**讓浮動元素的父級也浮動**。

缺點:需要給每個浮動元素父級新增浮動,浮動多了容易出現問題。1234

4、方法:父級設定成inline-block

缺點:父級的margin左右auto失效,無法使用margin: 0 auto;居中了12

5、 br 清浮動

1234

br 標籤自帶clear屬性,將它設定成both其實和新增空div原理是一樣的。

問題:不符合工作中:結構、樣式、行為,三者分離的要求。

6、給父級新增overflow:hidden 清浮動方法;

問題:需要配合 寬度 或者 zoom 相容ie6 ie7;12

overflow: hidden;*zoom: 1;12

7、萬能清除法 after偽類 清浮動(現在主流方法,推薦使用)

選擇符:after123456789

同時為了相容 ie6,7 同樣需要配合zoom使用例如:

.clear:after.clear123

需要注意的東西:

after偽類: 元素內部末尾新增內容;

:after ie6,7下不相容

zoom 縮放

a、觸發 ie下 haslayout,使元素根據自身內容計算寬高。

b、ff 不支援;

7樓:勢千厹

清除浮動:

--就是讓當前元素左右兩邊都不存在浮動元素的時候,才把元素放在標準流中顯示。

--清除浮動的四種方式:

1.使用空標記清除浮動,隔牆放。增加標籤。

在浮動標籤的後邊加一個

,不設定寬高然後設定.clearboth,然後再將需要的標籤放到這個空標籤後邊即可

2.使用overflow屬性清除浮動。會誤傷。

overflow:hidden;

3.使用after偽物件清除浮動

4.使用before after偽物件清除浮動clearfix(2,3,4中方式的結合,常用)。

8樓:

其實究其原因,就兩種原理清除與閉合,可以看下我寫的這個思路可能會清楚一點

網頁連結

有關css偽類:after清除浮動的問題

9樓:

【浮動產生負作用 】

1、背景不能顯示

由於浮動產生,如果對父級設定了(css background背景)css背景顏色或css背景**,而父級不能被撐開,所以導致css背景不能顯示。

2、邊框不能撐開

如上圖中,如果父級設定了css邊框屬性(css border),由於子級裡使用了float屬性,產生浮動,父級不能被撐開,導致邊框不能隨內容而被撐開。

3、margin padding設定值不能正確顯示

由於浮動導致父級子級之間設定了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

【css解決浮動,清除浮動方法】

方法一:

.clear

可以不用對父級設定高度 也無需技術父級高度,方便適用,但會多加css和html標籤。

方法二:對父級設定適合css高度

方法三:父級div定義 overflow:hidden

對父級css選擇器加overflow:hidden樣式,可以清除父級內使用float產生浮動。優點是可以很少css**即可解決浮動產生。

方法四:

.cle:after, .clearfix:after, .clear_f:after, .cle_float:after

.cle, .clearfix, .clear_f, .cle_float

在父級加上一個class

10樓:匿名使用者

清除浮動時就是要用block元素呀

11樓:匿名使用者

清除浮動的關鍵是這句好不好:clear:both;

div+css中的為什麼要設定浮動屬性,浮動完了為什麼又要清除浮動,那乾脆開始就別浮動了?

12樓:夢沒做得好

如果不清除浮動就出現,div重疊的問題。比如說,你做了一個網頁,最上面是一個header塊,中間有兩列內容塊,最下面是一個footer塊。你在中間內容塊的時候設定了左浮動,且兩塊的高度不一致,有一塊要高一些,那麼在footer就需要清除浮動,如果不清除浮動的話,footer塊就會與其中一個內容重疊,請看圖。

13樓:驚寒唱晚

我們先從它們的定義說起,float 屬性定義元素在哪個方向浮動,而 clear 屬性規定元素的哪一側不允許其他浮動元素。

我在空間裡寫了兩個小例子進行對比,應該可以更好理解這兩個屬性,樓主可以看一下:

css清除浮動到底是幹什麼用的?!

14樓:

其實究其原因,就兩種原理清除與閉合,可以看下我寫的這個思路可能會清楚一點

為什麼css浮動沒有效果是怎麼回事呢

在css中使用float指定浮動屬性值,該屬性的值指出了物件是否及如何浮動,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的標準流中,所以文件的標準流中的塊框表現得就像浮動框不存在一樣。float的基本語法 float none left right...

ie下css的padding問題

如果一個 dome1 那麼這個div的實際寬度應該是 140px高度應該是 140px 在ie跟火狐中都是 加一個 overflow hidden 如果是div下的內容大了,就隱藏。在這個div上加css overflow hidden 你大概記錯了吧。ie不計算border到總寬度裡面,ff會計算...

CSS UL LI高度問題,怎麼通過CSS來修改UL裡LI之間的行間距呢?

paddind跟vertical align問題 lie height 50px 配合height 50px 高度居中 最好貼圖出來。li 的高度怎麼設定 display block將行內元素設定為塊級元素就可以設定高度了 li你不是已經設定了麼 height 30px div css樣式,li自動...