清除浮動（clearfix）的常見方法

Kahn 發布于2019-08-30 13:19 / 1348人閱讀

摘要：此時可能會對周圍的布局產生影響，所以清除浮動，顯得十分重要。主要的方法一使用屬性添加偽元素通過在父元素后面添加一個偽元素，設置為并清除左右浮動解決問題。目前這個方法是最新的。總結如上所述，清除浮動有兩大方法，使用屬性和建立。

背景

當一個父元素包含的子元素都設置為float的時候，父元素的高度會出現坍塌的現象（見下圖）。此時可能會對周圍的布局產生影響，所以清除浮動，顯得十分重要。

主要的方法 一、使用clear屬性 1.添加偽元素

通過在父元素后面添加一個偽元素，設置為 block并清除左右浮動解決問題。目前這個方法是最新的。

.container::after {
    content:" ";
    display:block;
    clear:both;
}

可能有些代碼有添加::before,且display：table

.container::after,.container::before{
    content:" ";
    display:table;
}   
.container::after{
    clear:both;
}

實際上添加的部分跟浮動并沒有關系，他們的作用是防止子元素的margin-top發生重疊。
但添加::before就必須將display設置為table。主要原理：display設置為table時會出現一個匿名表格單元格（anonymous table-cell），從而創建一個新的BFC（下文會提及），根據BFC的布局規則，會使margin-top不重疊。這里只是解釋說明有些代碼出現這種寫法的原因，如果沒有防止重疊的需求，完全可以精簡代碼，使用上一種寫法。

有時還會在代碼的最后寫上

.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

這里主要是為了兼容IE6/7.

還有一種相似的做法

 .clearfix:after{
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
}
.clearfix{
    zoom:1;
}

將display設置為block是因為:after是偽元素，要想獲得clear屬性必須將他轉換為block。添加visibility: hidden;height: 0;是讓包含塊末端看起來不那么亂，所以就直接隱藏起來。

2、添加標簽

最簡單除粗暴的方法就是直接在包含塊末端添加一個標簽，并且使用clear屬性。

但這種做法在HTML中語義不明確，一旦代碼量增加，后期比較難維護。慎用！

二、觸發浮動元素父元素的BFC（什么是BFC？之前寫的另一篇文章視覺格式化模型之BFC） 1、使用overflow屬性

.container {
    overflow: hidden; /* Clearfix! */
    zoom: 1;  /* Triggering "hasLayout" in IE */
    display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}

這里主要是將overflow設置為非visible值，建立一個BFC，根據BFC的布局規則將浮動子元素包含進來。需要注意的是，container 里面的內容是否有溢出的風險。

2、使用float屬性

直接將包含塊設置為float。即可建立BFC。但這種做法不推薦，因為整體浮動會影響其他的布局。

總結

如上所述，清除浮動有兩大方法，使用clear屬性和建立BFC。圍繞這兩方面可以使用很多小技巧。這里只是羅列幾個常見的方法，并詳細解釋每條語句的作用，雖然有點啰嗦，但重在理解。如果有更好的方法也歡迎補充。

云服務器 GPU云服務器的清除方法清除浮動常見的數據分析方法 js常見方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115476.html

CSS學習摘要-浮動與清除浮動

摘要：為了實現這個效果，我們需要清除浮動。元素被向下移動用于清除之前的左右浮動。塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用于同一個內的元素。且為了不影響接下來的文檔標準流，往往也要收尾做出清除浮動。以下從浮動到BFC的段落摘自MDN 網絡開發者float 浮動float CSS屬性指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。該元素從網頁的正常流...

番茄西紅柿 2019-04-23 13:40 評論0 收藏0
前端入門-day3(CSS中浮動和清除浮動)

摘要：寫在前面浮動是中一個相對比較麻煩的屬性，與之伴隨的通常是清除浮動。清除浮動因此，當我們用到了浮動，又不想出現這種情況的時候，就需要清除浮動。因此，注意浮動的使用場景，并且在需要的時候清除浮動，就可以很好的控制浮動啦寫在前面浮動是CSS中一個相對比較麻煩的屬性，與之伴隨的通常是清除浮動。今天我們一起來搞定浮動。常見的用法事實上，當我們將一個元素設置成浮動時，達到的效果如下圖： s...

googollee 2019-08-29 17:05 評論0 收藏0
CSS入門指南-2：盒子模型、浮動和清除

摘要：會在元素內容而不是元素后插入一個偽元素使用意味著中新增的子元素會被清除左右浮動元素。這一篇主要介紹了盒子模型，浮動和清除。這是CSS設計指南的讀書筆記，用于加深學習效果。上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動。盒子模型所謂盒子模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。可見的頁面版式主要由三個屬性...

ConardLi 2019-08-29 12:59 評論0 收藏0
CSS入門指南-2：盒子模型、浮動和清除

摘要：會在元素內容而不是元素后插入一個偽元素使用意味著中新增的子元素會被清除左右浮動元素。這一篇主要介紹了盒子模型，浮動和清除。這是CSS設計指南的讀書筆記，用于加深學習效果。上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動。盒子模型所謂盒子模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。可見的頁面版式主要由三個屬性...

charles_paul 2019-08-01 17:13 評論0 收藏0
css隨堂筆記（三）

摘要：隨堂筆記三關于背景圖片設置背景圖片圖片的路徑背景圖片位置方位名詞背景位置如果只設置一個方位詞，另外一個默認居中如果設置的值是兩個方位詞，與順序無關數值背景位置如果設置的值是數字一個值得時候，表示水平方向的位移，垂直方向默認居中兩個值得Css隨堂筆記（三） 1 關于背景圖片 ? A 設置背景圖片：background-image：url(圖片的路徑)； ? B 背景圖片位置： backgrou...

focusj 2019-04-23 13:26 評論0 收藏0