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