CSS（一）解析浮動塌陷與清除浮動

清除浮動方法

1. 對父級設置適合CSS高度，父級元素撐開而且包含子元素。

<p>固定高度</p>
  <div style="height: 50px;">
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
  </div>

1. 父級標籤---附加樣式屬性'overflow'屬性值爲'auto'或者'hidden'。便可清除浮動

<p>overflow hidden</p>
  <div style="overflow: hidden;">
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
  </div>

  <p>overflow auto</p>
  <div style="overflow: auto;">
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
  </div>

1. 附加子元素樣式設爲clear:both。便可清除浮動

<p>附加元素</p>
  <div>
    <i>Float Test</i>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <i>Float Test</i>
    <div style="clear: both;"></div>
  </div>

1. CSS3僞元素，父級標籤附加class。便可清除浮動。

// html
  <div class="clearfix">
    <p>Float Test</p>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <p>Float Test</p>
    <p>Float Test</p>
    <div style="float: left; background: red; height: 50px;">Float Left</div>
    <p>Float Testdas</p>
    <p>Float Testsdasdas</p>
    <p>Float Testasdasdasda</p>
  </div>

    // css
    .clear_fix::after {
      content: ".";
      clear: both;
      display: block;
      line-height: 0;
      overflow: hidden;
      font-size: 0;
      height: 0;
    }

    .clear_fix {
      zoom: 1;
    }
}

清除浮動方式總結

• 方式一：固定高度，已知高度能夠使用該方式。

• 方式二：父元素設置樣式屬性overflow，預知內容的寬高與父一致能夠採用該方式。

  1. 屬性值爲hidden 若是子的內容寬高超出父的寬高，則子內容超出部分會被修剪

  2. 屬性值爲auto 若是子的內容寬高超出父的寬高，則父會出現滾動條

• 方式三：子元素清除浮動。該方式最爲靈活，便於理解，易上手，但會產生冗餘的代碼和元素。

• 方式四：僞元素清除浮動。建議採用該方式

  1. 該方式HTML代碼更加乾淨，在代碼中不會存在冗餘的元素，在document tree中，該元素依然存在。

  2. 該方式僅限於清除該盒子結尾的浮動，相似於方式一和二，由於僞元素僅支持在該元素內容的最開始和結尾（::before、::after）

可視化渲染模型（visual formatting model）

渲染模型由三種組成

• 正常流(normal flow)：由塊級元素（block-level boxes）和行級元素（ inline-level boxes）組成

• 浮動（floats）: 首先會脫離正常流，而後根據屬性向左上或者右上浮動，至最近塊級元素（block-level boxes）的上下文內容（Content）最左或最右側。

  若是沒有清除浮動，浮動後，剩餘的上下文內容（浮動塌陷），會被塊級元素後的正常流元素填充，即佈局錯亂。

• 絕對定位（Absolute positioning）：脫離全部的束縛，常稱爲脫離文檔流。當position，值爲'absolute'或者'fixed'建立新的一層，根據z-index設置層級，根據left、right、top、bottom屬性決定安置的位置。

參考資料：https://www.w3.org/TR/CSS21/visuren.html#visual-model-intro

浮動塌陷

若是一個盒子裏子對象使用了CSS float（浮動）屬性，盒子不能包裹子對象，浮動塌陷就產生了。

公式：父級對象高度（div content）小於浮動子對象高度時（div style="float: left;"），如圖：

父對象盒子 === display: block === 塊元素

當父對象沒有設置高度時，默認會被塊級或者行級的對象撐開高度，但不會被浮動子對象撐開高度

浮動子對象

浮動至父對象的上下文（content）內，最左或最右，該父對象的最左或最右的寬度會減少。浮動對象是存在於上下文內的，會受盒子屬性maigin、padding、border影響（如圖綠色邊框）。

塌陷區域

浮動後，剩餘的上下文內容（如圖黃色區域），會被塊級元素後的正常流元素填充。即佈局錯亂。

浮動負面影響

• 盒子內容（高度、邊框）不能撐開，致使背景不能正常顯示，margin padding設置值不能正確顯示。
• 佈局錯亂，不能按預想的佈局正常顯示。

推薦

CSS 盒模型

CSS 浮動