BFC的理解以及解决的问题

最新推荐文章于 2023-10-20 18:04:09 发布

啊作

最新推荐文章于 2023-10-20 18:04:09 发布

阅读量914

点赞数 1

分类专栏：初学前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43213962/article/details/105959869

版权

初学前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

BFC

Block Formatting Context 块级格式化上下文
Formatting Context 指的是页面中的一个渲染区域，并且拥有一套渲染规则，他决定子标签如何定位，以及与其他标签的相互关系和作用
BFC，块级格式化上下文，指的是页面中的一个渲染区域，只有Block-level Box（块级盒子）参与，该区域中拥有一套渲染规则来约束块级盒子的布局，且与外部无关

如何生成BFC？

以下情况是目前能够生成BFC的情况：

根元素 html
float属性值不为none
overflow属性值不为visble
display属性值为inline-block
position属性值为absolute/fixed

BFC的特性/规则？

1，内部的块标签会在垂直方向一个接一个的放置
*2，垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
3，每个标签的左外边距和包含块的左边界相接触，即使浮动标签也是如此
*4，BFC区域不会与float的标签区域发生重叠
*5，计算BFC的高度时，浮动子元素也会参与计算
*6，BFC就是页面中的一个隔离的独立容器，容器里的字标签不会影响到外部标签，反之，外部标签也不会影响BFC内部标签

BFC解决的问题？

1，外边距折叠

根据特性第2条，属于BFC的两个相邻的标签外边距会发生重叠（父子外边距重叠、兄弟关系边距重叠）
解决：让标签处于不同的BFC区域中就不会重叠
1，父子边距重叠：给父元素设置生成BFC的属性
2，兄弟边距重叠：给其中任意一个添加一层BFC父级

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 60px;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            margin-top: 60px;
        }
        .wrap {
            /*
             float: left;
            position: absolute; 
            这两种方法虽然可以解决，但会遮盖下面的内容。
            */
            /* display: inline-block;
            这种会有空白间隙
             */
            overflow: hidden; /* 目前这种解决方法比较合适 */
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="wrap">
        <div class="box2"></div>
    </div>
</body>

这个小案例：给box1加父级盒，因为box1下面还有内容所以给父级wrap加上（脱离文档流的方式）会覆盖下面的内容。所以给相邻的下面那个元素加父级。

2，实现自适应的两栏或三栏布局（根据特性4）

两栏布局，左侧固定宽度，右侧栏自适应（浏览器的尺寸变化缩小放大）
三栏布局，左右两栏是固定宽度，中间栏是自适应
由于代码较多，就不演示了。

3，防止文字环绕图片排列（根据特性4）

浮动的元素会覆盖不浮动的元素，文字会环绕图片排列，把文字所在的标签设置为BFC，可以避免文字环绕的效果

4，清除浮动

根据第5条特性，所以通过bfc清除浮动，计算BFC的高度时，浮动子元素也会参与计算，例如给浮动元素父级添加overflow:hidden

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            border: 1px solid #000;
         }
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            float: left;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
        <div class="box1"></div>
    </div>
</body>

在这里插入图片描述

给父级盒wrap添加（BFC生成的条件即可）：
float: left;
overflow: hidden; 不为visible
display:inline-block
position:absolute/fixed

但是当中还是 overflow:hidden; 比较合适。

好了，今天就到这了。奥利给在这里插入代码片

啊作

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC的理解以及解决的问题

BFCBlock Formatting Context 块级格式化上下文Formatting Context 指的是页面中的一个渲染区域，并且拥有一套渲染规则，他决定子标签如何定位，以及与其他标签的相互关系和作用BFC，块级格式化上下文，指的是页面中的一个渲染区域，只有Block-level Box（块级盒子）参与，该区域中拥有一套渲染规则来约束块级盒子的布局，且与外部无关...
复制链接

扫一扫