BFC 触发与应用

打怪升级程序员

已于 2023-04-07 15:13:38 修改

阅读量217

点赞数

文章标签：前端 css css3

于 2023-04-07 14:21:48 首次发布

本文链接：https://blog.csdn.net/m0_56523483/article/details/130010869

版权

一、BFC是什么

BFC(Block formatting context)直译为"块级格式化上下文"。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

二、BFC的作用与应用场景

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

三、触发BFC的方式

根元素，即HTML元素
float的值不为none
position为absolute或fixed
display的值为inline-block、table-cell、table-caption
overflow的值不为visible

四、BFC实操简单应用

4.1 防止因为子元素浮动导致父元素高度塌陷（也是清除浮动的一种方式）

此例子元素inner浮动导致父元素高度塌陷

<style>
     .container {
       border: 10px solid red;
     }
     .inner {
       background: #08BDEB;
       height: 100px;
       width: 100px;
       float: left;
     }
   </style>
<body>
   <div class="container">
     <div class="inner"></div>
   </div>
 </body>

解决办法：应用overflow: hidden; 给父元素开启BFC问题得到解决

<style>
     .container {
       border: 10px solid red;
       overflow: hidden;
     }
     .inner {
       background: #08BDEB;
       height: 100px;
       width: 100px;
       float: left;
     }
   </style>
<body>
   <div class="container">
     <div class="inner"></div>
   </div>
 </body>

4.2避免外边距（margin）折叠

应用2：

此例相邻的块元素发生了 “外边距合并” 导致外边距重叠，相邻两个margin只显示一个

<style>
  .container {
    background-color: green;
    overflow: hidden;
  }

  .inner {
    background-color: lightblue;
    margin: 10px 0;
  }
</style>

<body>
  <div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>
</body>

解决办法，为中间的块元素开启BFC

<style>
  .container {
    background-color: green;
    overflow: hidden;
  }

  .inner {
    background-color: lightblue;
    margin: 10px 0;
  }

  .bfc {
    background-color: rgb(13, 33, 169);
    margin: 10px 0;
    overflow: hidden;
  }
</style>

<body>
  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>
</body>

打怪升级程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
BFC 触发与应用

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC(Block formatting context)直译为"块级格式化上下文"。避免多列布局由于宽度计算四舍五入而自动换行。清除浮动（让父元素的高度包含子浮动元素）避免某元素被浮动元素覆盖。
复制链接

扫一扫