1. 定比特方式
2. BFC

1 定比特方式

1. 普通流/文檔流
2. 浮動
3. 絕對定比特

1.1 普通流/文檔流

規則

• 元素按照其在HTML中的先後比特置自上而下布局
• 行內元素水平排列，直到當行被占滿然後換行，塊級元素則會被渲染為完整的一個新行
• 所有元素默認都是普通流定比特

1.2 浮動

規則

• 元素先按照普通流的比特置出現，然後根據浮動的方向盡可能向左或向右偏移
• 平移到容器邊框，或者碰到另外一個浮動的元素
• 父容器得不到脫離普通普通流的子元素的高度
• 會將元素的display屬性變更為block

• 浮動前的元素：

  block:無影響
  inline：浮動比特於之前
  inline-block：浮動比特於之前

• 浮動後的元素：

  block：覆蓋，浮動在上
  inline: 緊跟浮動元素
  inline-block：緊跟浮動元素

• 重疊時

  block：浮動在上，塊內容環繞浮動元素
  inline：浮動在下
  inline-block：浮動在下

清除浮動

• 使用clear屬性

  //在父級後加一個空塊
  .clear {
  clear:both
  }
  //使用偽元素加空塊
  .parent::after {
  content: "";
  display: block;
  clear: both;
  }

• BFC

  .parent {
  overflow:hidden;
  }

  上面主要針對父級高度塌陷
  可以對浮動周邊元素添加clear屬性，清除浮動帶來的影響

1.3 絕對定比特

規則

• 元素會整體脫離普通流，不會對其兄弟元素造成影響

2 BFC

規則

• 屬於普通流，可以視為一塊渲染區域或者元素的一個屬性 - 隔離的獨立容器，不會影響其他元素
• 浮動元素的高度也參與計算

2.1 觸發BFC

1. 根元素
2. float： 不為 none
3. position： absolute、fixed
4. display：inline-block、inline-table、inline-flex、inline-grid、flex、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、flow-root
5. overflow：不為visible的塊元素
6. contain：layout、content、paint
7. 多列容器 column-count、column-width不為auto

2.2 作用

1. 避免外邊距重疊
2. 清除浮動
3. 阻止元素被浮動元素覆蓋

避免外邊距重疊

<div class="item"></div>
<div class="item"></div>
.item {
width: 300px;
height: 100px;
margin: 100px;
background-color: aquamarine;
}

兩個元素外邊距都是100px，上下間距應該是200px，結果為100px，上下邊距發生了重疊，

<div class="container">
<div class="item"></div>
</div>
<div class="container">
<div class="item"></div>
</div>
.item {
width: 300px;
height: 100px;
margin: 100px;
background-color: aquamarine;
}
.container {
overflow: hidden;
}

在兩個元素分別包上一個container，觸發BFC，BFC上下不會發生邊距重合

清除浮動
上面已經介紹，解决父級高度塌陷的問題

阻止浮動元素覆蓋
前面介紹了，浮動元素後面的塊級元素會被浮動元素覆蓋
可以讓這個塊級元素觸發BFC，添加overflow：hidden

<div class="item1"></div>
<div class="item2"></div>
.item1 {
width: 100px;
height: 100px;
float: left;
background-color: aquamarine;
}
.item2 {
width: 300px;
height: 300px;
background-color: #dede;
}

.item2 {
width: 300px;
height: 300px;
background-color: #dede;
overflow: hidden;
}