CSS 浮動清理，不使用 clear both標籤

2021-08-30 02:52:52 字數 859 閱讀 6801

在進行浮動布局時，大多數人都深知，在必要的地方進行浮動清理，例如：



some content
此時預覽此**，我們會發現最外層的父元素float container,並沒有顯示。這是因為子元素因進行了浮動，而脫離了文件流，導致父元素的height為零。

若將**修改為：



some content
注意，多了一段清理浮動的**。這是一種好的css**習慣，但是這種方法增加了無用的元素。這裡有一種更好的方法，將html**修改為：



some content
定義css類，進行「浮動清理」的控制：

.clearfix:after             /* 這是對firefox進行的處理，因為firefox支援生成元素，而ie所有版本都不支援生成元素 */


.clearfix /* 這是對 mac 上的ie瀏覽器進行的處理 */


/* hides from ie-mac \*/


* html .clearfix /* 這是對 win 上的ie瀏覽器進行的處理 */


.clearfix /* 這是對display: inline-block;進行的修改，重置為區塊元素*/


/* end hide from ie-mac */
此時，預覽以上**，會發現即使子元素進行了浮動，父元素float container仍然會將其包圍，進行高度自適應。

**參考：

CSS 清理浮動 clear屬性

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

CSS 清除浮動Clear

還記得第二課我們做的例子的效果麼？最後效果是，紅色方塊和藍色方塊都處於一行，我們使用 float left 打擊了塊狀元素的 霸道 即塊狀元素不允許其他元素和它處於同一行。我們將紅色方塊的css 中加入了 float left 後，紅色方塊終於允許藍色方塊和它處於同一行。如圖 我們換一種方法表達上面...

css之clear 清除浮動

哈哈哈哈哈哈哈，我懂了原理啦 clear清除的是浮動的高度 就是跑到位置 而不影響浮動的方向.原理如下 clear清除的是元素本身，但不會影響方向。通俗點說就是clear清除的是浮動產生的文件流。舉個例子，就是有2個div,當第二個div產生浮動時，第二個div會脫離第二行，到達第一行。當你清除它的...