BFC的理解与运用

什么是BFC

全称块级格式化上下文Block Formatting Context),Block我理解为一个块盒子block box,格式化我理解为一个规则,上下文我理解为一个区域或者作用域,那么整体理解就是页面中一个按一定规则渲染的块级区域(消化之后的个人理解)

应用MDN的定义

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

主要用于解决什么问题

浮动元素导致父元素高度塌陷

由于浮动元素脱离了文档流,所以父级元素计算高度的时候不会计算浮动元素,所以会出现高度塌陷的情况,而在BFC的定义中,BFC计算高度的时候同样也会计算浮动元素,所以将父级设置为BFC则能解决高度塌陷的问题

相邻元素外边距重叠

也是很常见的情况,两个相邻的div元素

<style>
    div {
        background: #000;
        width: 200px;
        height: 100px;
        margin: 100px;
    }
</style>
<body>
    <div>Haha</div>
    <div>Hehe</div>
</body>

可以看到上下两个div都设置么上下margin为100px,那么两个div上下间隔应该200px,但是实际并不是,如图

图片

两个div之间的间距并不是200px而是只有100px,这就是外边距重叠,解决这个问题就是将其中一个div创建为BFC,由于BFC是一个独立的区域,内部的渲染不会受外部的影响也不会影响外部,所以能解决这个问题

如何创建BFC

常见的创建BFC的方式有

  • 根元素html
  • display设置flow-root, inline-block, flex, grid, inline-flex和inline-grid
  • 浮动元素
  • 绝对定位position为absolute或者fixed
  • overflow设置值不为visible

此外还有很多不一一列举了
MDN官网提出一点需要注意

使用 overflow 来创建一个新的 BFC,是因为 overflow 属性告诉浏览器你想要怎样处理溢出的内容。当你使用这个属性只是为了创建 BFC 的时候,你可能会发现一些不想要的问题,比如滚动条或者一些剪切的阴影,需要注意

针对这个问题MDN官网建议使用display: flow-root来创建BFC,官网声称这个属性是不会带来副作用的,不过似乎兼容性不高,我去can i use?上面看了下这个属性ie所有版本都不支持,所以建议我认为还是用overflow比较好

posted @ 2020-09-01 11:09  j植树  阅读(132)  评论(0编辑  收藏  举报