胖蔡说技术
随便扯扯

如何理解BFC?为什么要使用BFC?

作为一个成熟的前端程序员,你应该听过BFC这个单词了,BFC基本可以说是现在我们前端布局的一个灵魂属性了。今天我们来说一说BFC的那些事儿。

BFC是什么?

BFC就是我们通过CSS布局一个容器,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。容器内的布局按规则排放不会影响容器外部的布局。若是HTML元素符合BFC的条件,则BFC的内部布局不会受到外部布局的影响。

BFC形成条件

  • 浮动布局方式,即float布局除了none属性值以外的其他布局
  • overflow取(非visible):hiddenautoscroll
  • display布局取值:inline-blocktable-celltable-captionflex、inline-flex、tabletable-row、 table-row-grouptable-header-grouptable-footer-group、 flow-rootgrid 、inline-grid
  • position取值:absolutefixed
  • contain 取值为 layoutcontent 或 paint 的元素
  • 多列容器(column-count 或 column-width值不为 auto,包括column-count 为 1
  • column-span 值为 all 的元素始终会创建一个新的 BFC,即使该元素没有包裹在一个多列容器中

为什么要使用BFC?

BFC的出现本身也是为了解决问题的。

  • 解决margin传递问题
<!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>
    	* {
            margin: 0;
        }
        
        .box1 {
            width: 300px;
            height: 300px;
            background: skyblue;
        }

        .box2 {
            width: 130px;
            height: 130px;
            background: lightgreen;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

如上,box2 的margin-top传递到了 box1 那,即 box2 影响到了外面的元素 box1的布局,这时候,我们可以通过BFC是的box1变成一个独立的容器,其内部样式不会影响外部元素。

.box1 {
width: 300px;
height: 300px;
background: skyblue;
overflow: hidden; /* 触发了 BFC 规则,形成了独立容器 */
}
  • BFC可以解决子元素浮动导致父元素高度塌陷问题
  • margin重叠问题
  • 防止文字环绕

赞(1) 打赏
转载请附上原文出处链接:胖蔡说技术 » 如何理解BFC?为什么要使用BFC?
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏