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;
}