清理浮動相關

2021-07-25 04:04:55 字數 437 閱讀 4518

我們將現有已知的清楚浮動元素方法羅列下:

採用乙個html標籤,以及css的clear屬性,來手工清理浮動;

採用偽類:after,動態建立乙個塊元素,設定 clear 屬性,清理之前的浮動元素;

採用css overflow 非 visible 值(overflow:auto/overflow:hidden)設定使父容器包含浮動元素;

採用display:table/display:table-cell 等table系列屬性將父元素變成 table 形式自動包含浮動元素;

使用 table 以及 td 標籤作為浮動元素容器;

採用 float:left/float:right 方式將父元素同樣浮動,就可以包含浮動內容;

在 ie 6/7 的標準文件模式中設定 「width/height/zoom」 等樣式來自動清理浮動。

清理浮動相關:

CSS清理浮動

發表於2011年2月1日 由sivan 文章目錄 前言清理浮動的方法 使用帶有clear屬性的空元素 使用css的 after偽元素 使用css的overflow屬性進行怪異處理 給浮動元素的容器新增浮動 使用鄰接元素清理 其他方法 我的解決方案 綜合運用方案 一勞永逸方案 小結 update 20...

清理浮動的方法

1.clear屬性 屬性值 left right both none 表示框的哪些邊不能挨著浮動框 新增乙個空元素並清理它 news news img news p clear text 新增乙個 或其他的,新增clear屬性,清理它上面的浮動元素,both即清理左浮動和右浮動 缺點 新增了不必要的...

CSS 清理浮動 clear屬性

文章 雖然浮動可以便於頁面布局,但同時會產生一些問題,也就是常說的 浮動元素最常見的缺陷是 父元素的高度塌陷和影響兄弟元素的位置。首先,看看父元素的高度塌陷。假設有乙個容器,其中兩個子元素,乙個子元素向左浮動,乙個子元素向右浮動。如下 box2 圖5 29 浮動導致容器高度塌陷 這種塌陷會影響 甚至...