头图

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

image.png

两个元素外边距都是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;
}

image.png

在两个元素分别包上一个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;
}

image.png

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

image.png

阅读 502
37 声望
2 粉丝
0 条评论
37 声望
2 粉丝
文章目录
宣传栏