深入清除浮動原理

freewolf 發布于2019-08-29 15:25 / 1330人閱讀

摘要：如下圖所示可以看到父元素的高度為為了解決這種狀況就要清除浮動了。下面詳細看一下這兩大類清除浮動的方式及原理。所以，避免穿透啊，清除浮動什么的也好理解了。

關于浮動

設置為浮動的元素會脫離當前文檔流，向左或向右移動直到邊緣遇到另一個浮動元素或者到達邊界。普通元素不會對齊造成影響。
浮動是把雙刃劍，在給我們的布局帶來便利的同時有一些缺點需要我們去解決。例如最常見的父元素塌陷。如下圖所示：

.warper{
    width: 200px;
    border:1px solid  #ff6633;
}
.float-1{
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.float-2{
    float: left;
    background: #ff0;
    height: 50px;
    width: 100px;
}
//html

可以看到父元素的高度為0,為了解決這種狀況就要清除浮動了。

清楚浮動的方式

總結了一下，大致有如下幾類:

1. 結尾空元素或者after等偽元素或者br 來clear
2. 父元素同樣浮動
3. 父元素設置overflow為hidden或者auto 
4. 父元素display：table

大致歸類，可以分為兩大類，1使用clear的屬性，后面的可以歸為一類，都是通過觸發BFC來實現的。
下面詳細看一下這兩大類清除浮動的方式及原理。

clear屬性

clear 屬性規定元素盒子的邊不能和浮動元素相鄰。該屬性只能影響使用清除的元素本身，不能影響其他元素。
換而言之，如果已經存在浮動元素的話，那么該元素就不會像原本元素一樣受其影響了。
第一種方式里我們的填補元素(我自己的稱呼)，就是起這種作用。

//這里當然可以換成一個空的div，
等，原理和效果都是一致的  
.warper:after {
    content: "";
    height: 0;
    display: block;
    clear: both;
}

此時after偽元素設置clear：both之后表明，我兩邊都不能接受浮動元素，原本受浮動元素影響，偽元素的位置在浮動元素下方如圖：

這樣顯然也不能撐起父元素的高度。設置之后，需要重新安排安排了。
既然兩邊都不接受浮動元素，但浮動元素位置也確定了，那只能把偽元素放在下邊，如圖：

可以看到，偽元素的位置在最下方了，距頂部的高度為float元素的高度，順帶撐起了父元素的高度。
同樣適用其他填充元素（display為block），都能達到相同的目的。
在看后面幾種原理之前我們需要先看一下BFC的定義。

BFC 塊級格式化上下文：BFC(block formatting contexts)

照本宣科的定義看起來可能不大好理解，BFC是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
借用張鑫旭大大的一句話，BFC元素特性表現原則就是，內部子元素再怎么翻江倒海，翻云覆雨都不會影響外部的元素。
所以，避免margin穿透啊，清除浮動什么的也好理解了。

正如下面的解釋：

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats)
在BFC中，每個盒子的左外邊框緊挨著包含塊的左邊框（從右到左的格式，則為緊挨右邊框）。即使存在浮動也是這樣的（盡管一個盒子的邊框會由于浮動而收縮），除非這個盒子的內部創建了一個新的BFC浮動，盒子本身將會變得更窄）。

BFC的特性

塊級格式化上下文會阻止外邊距疊加

塊級格式化上下文不會重疊浮動元素

塊級格式化上下文通常可以包含浮動

換句話說創建了 BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，反之亦然
同時BFC任然屬于文檔中的普通流。所以呢浮動也就解決了，關于BFC以后要專門搞個文章仔細研究一下。

看到這里就可以知道了，為什么可以拿來清除浮動了，表現為BFC的元素都是一個十分個性的存在，無論里面怎么折騰，對外表現始終如一。
大家肯定可以猜到，上面幾種利用了BFC的清除方式肯定是觸發了BFC的條件，讓父元素變為BFC。我們來看一下觸發BFC的條件，看是不是如我們所想。

BFC觸發條件

CSS3里面對這個規范做了改動，稱之為：flow root，并且對觸發條件進行了進一步說明。

float 除了none以外的值 
 
overflow 除了visible 以外的值（hidden，auto，scroll ） 
 
display (table-cell，table-caption，inline-block) 
 
position（absolute，fixed） 
 
fieldset元素

由上面可以對比一下，我們提到那幾種方法，就是觸發了BFC而已。
看個例子

.warper{
    width: 200px;
    border:1px solid  #ff6633;
    // 下面屬性任選其一
    overflow: hidden;
    overflow: auto;
    float: left;
    display:inline-block;
    position: fixed;
}

結束語 參考文章

CSS深入理解流體特性和BFC特性下多欄自適應布局
理解CSS中BFC

到這里清除float相關的內容就說完了，知其然更要知其所以然，清除float的方式繁多無比，掌握其中原理才能不人云亦云。當然拋磚引玉，更多的是共同學習共同進步,更多請移步博客。

云服務器 GPU云服務器清除浮動 html浮動向上浮動上下浮動左右浮動

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

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

浮動(Floats)原理與清除浮動

摘要：父元素的頂端會限制浮動元素防止一直浮動到頁面頂端。例子戳這里清除浮動清除浮動的目的是為了解決高度塌陷的問題撐開浮動父元素。原理會在元素的之上增加一個清除區域這個區域會在元素的上增加額外間隔并且不允許浮動元素進入這個區域。浮動概念浮動元素會脫離文檔的普通流,根據float的值向左或向右移動,直到它的外邊界碰到父元素的內邊界或另一個浮動元素的外邊界為止。由于浮動框不在文檔的普通流中,所...

andong777 2019-08-29 10:57 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

Tonny 2019-08-29 12:23 評論0 收藏0
理解CSS浮動與清理

摘要：浮動為什么會有文本環繞效果產生這個疑問主要來自于以往的印象浮動的元素是脫離文檔流的。也就是說，浮動元素的確脫離了文檔流，因此文檔流中的塊框會無視浮動的元素，但是文本不會。作為前端寫了很多頁面布局，但是浮動這塊一直是我似懂非懂的盲點，一方面用浮動能實現很多布局，另一方面浮動造成的影響又會破壞布局讓人頭疼，所以今天就特地寫篇博文解決這塊盲點。本文主要討論以下幾個問題：1.浮動的原始用途...

cyqian 2019-08-01 16:39 評論0 收藏0
BFC--margin折疊和清除浮動

摘要：背景以前在寫和的時候，兩個都設置了不同的上下值。它是決定塊盒子的布局及浮動元素相互影響的一個因素。創建根元素絕對定位元素為或的值不為的值為的值不為折疊屬于同一個的兩個相鄰的會發生折那如何阻止折疊呢，只要將其中一個創建新的就行了。背景以前在寫html和css的時候，兩個div都設置了margin不同的上下值。寫完后我開心的打開頁面，為毛兩個應該隔的比較開的div，距離并不是我設置的m...

zhangfaliang 2019-08-30 13:09 評論0 收藏0