清除浮動 or 閉合浮動

時間 2019-12-08

標籤清除浮動閉合简体版

原文原文鏈接

寫在前面

前端開發會遇到許許多多須要清除浮動的狀況，clearfix想必你們也不會陌生，今天就將我所認識的清除浮動分享給你們，也便於本身之後學習記憶。因爲經驗所致，必然會有諸多不足，歡迎你們多多指正！css

什麼是清除浮動，它與閉合浮動有區別嗎？

網上關於清除浮動閉合浮動的說法有不少，可能也會有一些人以爲這兩者是一個意思。那我就說下我所理解的兩者的區別：html

清除浮動：用代碼來解釋就是clear:both;我以爲更加貼切的叫法應該是清除浮動對本身的影響更爲合適。它指的是設置clear屬性的元素不會受到某一側或者多側外部浮動元素的影響。
閉合浮動：閉合浮動在我看來會更加貼切咱們平常的用法，就是消除內部元素浮動所形成的外部元素塌陷的負效應，通常來講會用一些屬性來觸發元素的BFC,來達到目的。

平常清除浮動的方式

清除浮動的寫法有不少，可是究其緣由，有如下兩種：前端

使用清除浮動，在外部元素的末尾加上一個元素，將其設置爲clear:both,再將其隱藏掉，以免對原來樣式的影響。
使用閉合浮動，用特殊的屬性來觸發bfc,達到使內部元素能夠撐起父元素的目的

那麼什麼是BFC呢

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。java

我認爲能夠當它是一套規則，只要元素屬性出發了BFC，那麼他就會在元素上應用這套上下文規則。佈局

首先咱們來看看因該如何觸發它

1. 根元素 <html>
2. float屬性不爲none
3. position爲absolute或fixed
4. display爲inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不爲visible
複製代碼

在來講說觸發了bfc有什麼做用

總結做用以下：學習

不一樣bfc會阻止外邊距的疊加flex

有兩個相鄰p標籤的margin-top和bottom都是20，那麼正常狀況下他們中間相臨的外邊距會疊加到一塊兒，咱們可使用一個div將其中一個p包裹起來，並設置overflow:hidden那麼，這兩個p標籤之間的就不是處在同一個bfc下，則標籤外邊距不會疊加，也就是會產生40的間距。spa
同一個bfc中，垂直方向上的外邊距會疊加。code
bfc定義的元素，會包含浮動，也就是外元素在計算高度的時候會把浮動的內元素高度算進去。orm
bfc定義的元素，使其子元素的外邊距沒法與定義bfc的父元素邊框相交。

這樣也能夠解釋爲何他會包裹浮動子元素
bfc元素不會與浮動元素髮生重疊

clear:both清除浮動來實現撐起父元素的寫法

<div class="par">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
複製代碼

.par {
        width: 420px;
        background-color: aquamarine;
        border: #000 solid 1px;
    }
    .par:after {
        content: '.';
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .son1,
    .son2 {
        height: 200px;
        width: 200px;
        float: left;
    }
    .son1 {
        background-color: chocolate;
    }
    .son2 {
        background-color: fuchsia;
    }
複製代碼

通常來講，咱們會寫好一個類來定義clear:both,這也就是clearfix的由來，ie低版本須要設置zoom:1

使用bfc來閉合浮動

.par {
        width: 420px;
        background-color: aquamarine;
        border: #000 solid 1px;
        overflow: hidden;
    }
    
    .son1,
    .son2 {
        height: 200px;
        width: 200px;
        float: left;
    }
    
    .son1 {
        background-color: chocolate;
    }
    
    .son2 {
        background-color: fuchsia;
    }
複製代碼

是否是簡單不少，可是這樣卻由於定義的屬性改變了元素特性。因此在代碼中要看需求來選擇。大多數都不會有什麼影響。結合上面所說bfc規則，很容易就能想象出爲何浮動元素會撐起外部元素。

bfc還能作些什麼呢？

佈局之前的佈局方式相似於左側浮動，右側設置padding-left的方式，就額能夠變爲右側不用設置padding，直接觸發bfc利用第五條規則達到佈局效果。
解決父元素高度塌陷（閉合內部浮動）
解決垂直方向上兄弟元素的margin重疊