likes
comments
collection
share

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

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

块级格式化上下文

全称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. 特殊性

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

特殊性的看法:

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

  1. 源次序

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