关于BFC的理解

最新推荐文章于 2023-07-22 15:59:09 发布

林元.～

最新推荐文章于 2023-07-22 15:59:09 发布

阅读量144

点赞数

分类专栏：前端文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/weixin_45268910/article/details/118493566

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

BFC的名字：BFC名字叫做块级格式化上下文。

是W3C CSS 2.1 规范中引入的一个概念。

在普通流中我们设置的盒子会参与一种格式化上下文，而块级盒参与块级格式化上下文，这也就是我们所说的BFC。

对于BFC的李姐（#doge）：
BFC决定了元素与其他元素的关系和相互作用。简单理解BFC就是一块独立出来的特殊区域，在这个独立的区域中它规定这个区域里的内容与区域外部的所有内容毫不相干，互不影响。

通常在我们的使用中创建BFC的情况有如下几种：

1、使用浮动就会创建BFC

2、overflow属性只要不是默认值visible就会触发BFC

3、display：inline-block和flex也会触发BFC

4、positon：fixed，absolute会脱离文档流

关于BFC的应用场景有：

1、解决margin的（父元素和子元素）粘连问题

解决方式：

①给父元素加一个透明的边框

②用padding来设置间距

③给父元素设置overflow：hidden；

注意：所有能让父元素和子元素产生BFC的代码，都能解决粘连的问题

2、Margin的塌陷问题：

两个兄弟盒子之间同时设置了margin，那么他们之间的间距并不是两个间距之和，这就是塌陷问题

margin塌陷解决方法：

①只给一个兄弟设置足够外边距（推荐）

②使用padding内边距来撑开盒子，从而使两兄弟的内容有一定距离（不推荐）

3、清除浮动

4、布局

在我们有一些布局方式中也会用到关于bfc的

我们举个例子：我们常见的左右布局和三列布局就会用到BFC

1、左边固定，右边自适应

左边设置宽，设置左浮动右边设置overflow : hidden;

代码如下：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #box1 {
            height: 100px;
            width: 200px;
            background-color: rgb(91, 228, 28);
            float: left;

        }

        #box2 {
            height: 100px;
            background-color: rgb(204, 224, 20);
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

效果如下：

好啦！就这么多了，真的一滴都没有了

林元.～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于BFC的理解

BFC的名字：BFC名字叫做块级格式化上下文。是W3C CSS 2.1 规范中引入的一个概念。在普通流中我们设置的盒子会参与一种格式化上下文，而块级盒参与块级格式化上下文，这也就是我们所说的BFC。对于BFC的李姐（#doge）： BFC决定了元素与其他元素的关系和相互作用。简单理解BFC就是一块独立出来的特殊区域，在这个独立的区域中它规定这个区域里的内容与区域外部的所有内容毫不相干，互不影响。...
复制链接

扫一扫