likes
comments
collection
share

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

作者站长头像
站长
· 阅读数 19

块级格式化上下文

全称Block Formatting Context，简称BFC

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局，不同的BFC区域，它们进行渲染时互不干扰，创建BFC的元素，隔绝了内部与外部的联系，内部的渲染不会影响到外部

这里注意：是针对常规流块盒的布局，所以什么行盒、浮动元素定位布局就不在此讨论了
常规流块盒在水平方向上，必须撑满包含块
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素

BFC渲染区域：以下元素会在其内部创建BFC区域（常见的）

  • 根元素-html，意味着html创建的BFC区域包含了网页中所有的元素
  • 浮动和绝对定位元素
  • overflow不等于visible的块盒

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

具体的规则：

  • 创建BFC的元素，它的自动高度需要计算浮动元素
  • 创建BFC的元素，它的边框盒子不会与浮动元素冲重叠
  • 创建BFC的元素，不会和它的子元素进行外边距合并

BFC与高度塌陷

常规流的元素是看不见浮动元素的，如果内部有浮动元素，会形成高度塌陷

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC与高度塌陷</title>
    <style>
      .container {
        background-color: skyblue;
      }
      .item {
        float: left;
        margin: 20px;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

这里形成了父元素的高度塌陷，有两个解决方法：

第一种是加伪元素clear:both

.clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

第二种是给父元素设置BFC

.clearfix {
    overflow: hidden;
  }

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

BFC与浮动元素

常规流元素是看不见浮动元素的，完全忽视

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC与浮动元素</title>
  </head>
  <style>
    .float {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: 20px;
      float: left;
    }
    .container {
      height: 500px;
      background-color: aqua;
    }
  </style>
  <body>
    <div class="float"></div>
    <div class="container"></div>
  </body>
</html>

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

这里常规流元素是会忽视浮动元素的，可以给其创建BFC，这样就会计算浮动元素的布局了，这样它的边框盒子不会与浮动元素重叠

.container {
  height: 500px;
  background-color: aqua;
  overflow: hidden;
}

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

注意：这里给container设置margin-left作用不大，因为其是针对float元素的，需要给float元素设置margin-right

BFC与外边距合并

其实可以这么理解：处在不同BFC中的元素，它们的外边距是不可能合并的，只有相处同一个BFC中的元素，外边距才可能合并

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC与外边距</title>
  </head>
  <style>
    .container {
      height: 500px;
      background-color: skyblue;
      margin-top: 20px;
    }

    .child {
      height: 100px;
      background-color: red;
      margin: 50px;
    }
  </style>
  <body>
    <div class="container">
      <div class="child"></div>
    </div>
  </body>
</html>

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

此时，处于同一个BFC-html下的两个元素外边距合并了，这时只要设置父元素为BFC即可

.container {
  height: 500px;
  background-color: skyblue;
  margin-top: 20px;
  overflow: hidden;
}

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

CSS中的层叠规则

层叠规则是样式计算(Computing Style)里面解决样式冲突的，按照以下排序：

  1. 优先级

     作者样式表 !important
 默认样式表 !important
 作者样式表
 默认样式表

  2. 特殊性

     算出来是四个数字(?,?,?,?)，比较是从高位开始到低位
 第一个数字只能是0或1，内联样式是1，其他三个数字都是0如(1,0,0,0)；选择器样式是0如(0,?,?,?)
 第二个数字只能是选择器样式生效，表示id选择器的数量
 第三个数字表示class选择器、伪类选择器和属性选择器的数量
 第四个数字表示元素选择器(如a)、伪元素选择器(如::after)的数量

特殊性的看法：

2023-06-03 彻底理解CSS中的BFC与样式计算中的层叠关系

  1. 源次序

     在源代码中的书写顺序，后写的覆盖前面的
转载自:https://juejin.cn/post/7240289965522911288
评论
请登录