BFC——通俗理解什么是BFC

最新推荐文章于 2024-03-23 00:06:53 发布

木的又

最新推荐文章于 2024-03-23 00:06:53 发布

阅读量3.4k

点赞数 2

分类专栏：前端基础文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_44909683/article/details/105672382

版权

文章目录

在理解BFC之前，我们需要先回顾常规流布局的概念（忘记或者还没看的小伙伴点击前端CSS基础——常规流布局）

常规流布局

常规流块盒独占一行
常规流块盒在垂直方向依次摆放
常规流块盒父子元素外边距合并
常规流块盒排列无视浮动元素或者脱离常规流布局的元素
常规流块盒高度不计算浮动元素

BFC的概念

理解完常规流后，我们介绍下BFC，什么是BFC？BFC全称为：Block Formatting Context——块级格式化布局，简称BFC，它是一块独立的渲染区域，这个区域决定了常规流块盒的布局。 也就是说，BFC是一块区域，作用是决定常规流块盒的布局。

BFC的创建

BFC由某个HTML元素创建，下列元素会在其内部创建BFC区域。

根元素（<HTML>元素，<HTML>元素创建的BFC区域覆盖了所有网页的元素）
浮动定位或者绝对定位元素（float 和 position：absolute）
overflow属性不为默认值（visible）的块盒元素

如图所示
在这里插入图片描述
注意到没有，每个元素创建的BFC都是互相独立的，元素A、B、C的BFC跟其他元素创建的BFC或者根元素创建的BFC都是相互独立。

BFC的特性

不同的BFC在进行渲染时互不干扰
创建BFC的元素隔绝了它内部BFC与外部BFC的联系，内部的渲染不会影响到外部

BFC的应用

解决高度坍塌的问题

在前面发布过的文章中，有提到解决高度坍塌的方法，那就是清除浮动（clear:botn）。现在我们了解BFC后，也能用BFC来解决高度坍塌问题。

 	.container{
   
            width: 100%;
            background-color: skyblue;
            margin-top: 20px;
        }

        .float{
   
            float: left;
            width: 200px;
            height: 100px;
            background-color

最低0.47元/天解锁文章

木的又

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
BFC——通俗理解什么是BFC

文章目录常规流布局BFC的概念BFC的创建BFC的特性BFC的应用解决高度坍塌的问题相邻父子元素外边距合并问题无视浮动盒子排序问题总结在理解BFC之前，我们需要先回顾常规流布局的概念（忘记或者还没看的小伙伴点击前端CSS基础——常规流布局）常规流布局常规流块盒独占一行常规流块盒在垂直方向依次摆放常规流块盒父子元素外边距合并常规流块盒排列无视浮动元素或者脱离常规流布局的元素常规流块盒...
复制链接

扫一扫