【css】块格式化上下文(BFC)

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