CSS 清除浮動的幾種方式

2021-09-19 09:20:13 字數 1260 閱讀 1765

原文章:

1)用 :after 偽類,在父元素最後插入乙個空字串(content:"")、元素設為塊級元素(display:block)、清除浮動(clear:both)、可見設為隱藏、高度為 0

2)相容低版本ie瀏覽器:同時設定給父元素設定樣式

其中 clear:both; 指清除元素兩側的所有浮動,如果該元素前後有浮動元素,元素就會自己獨佔一行;

content:' . ';display:block; 對於ff/chrome/opera/ie8不能缺少,其中 content() 取值也可以為空。

visibility:hidden; 的作用是允許瀏覽器渲染它,但是不顯示出來,這樣才能實現清除浮動。 

利用偽元素,就可以不在html中加入標籤。

:after 的意思是再.outer 內部的最後加入為元素 :after,

首先要使偽元素佔位置,所以display:block,

然後為偽元素加入空內容,以便偽元素中不會有內容顯示在頁面中,所以, content:"";

其次,為使偽元素不影響頁面布局,將偽元素高度設定為0,所以, height:0,

最後,要清除浮動,所以,clear:both。

content 屬性與 :before 及 :after 偽元素配合使用,來插入生成內容。

缺點:**多,不少初學者不理解原理,要兩句**結合使用,才能讓主流瀏覽器都支援

建議:推薦使用,建議定義公共類,以減少css**

評分:★★★★☆

left

right

div2

left

right

div2

left

right

div2

left

right

div2

left

right

div2

left

right

div2

left

right

div2

css清除浮動的幾種方式

為什麼要清除浮動 清除浮動主要是為了解決,父元素因為子級元素浮動引起的內部高度為0的問題。舉個例子 此時元素是這樣的 如果我們讓其中的子元素浮動,那麼就會變成下面這樣,我們會發現父元素的內容區的高度不見了 incont使用after偽元素清除浮動 推薦使用 content content after...

清除浮動的幾種方式

1.可以給父級元素設乙個高度,如果高度是固定的,這種方法 簡單,但是要給父級元素設成乙個固定的高度。2.可以在浮動的下面加乙個空的元素 clear both 3.給父元素定義乙個偽類 after或 before clear both,display block zoom 1 為了相容ie zoom ...

清除浮動的幾種方式

元素1 元素2元素3 元素4元素5元素6 1.方法一 給父元素設定乙個高度 但是這種方法不經常使用 box1 box1 items box2 box2 items items2.使用clear both 這種方法相對於第一種方法較為簡潔,但是會造成第二個盒子元素的margin top屬性無效。這種方...