欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

了解什么是 CSS 中的 BFC 的文章？

最编程 2024-05-30 15:07:56
...

个人理解

1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；

2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；

3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。

二、BFC有什么用？

BFC的触发条件

1、根元素（<html>）

2、float值非none

3、overflow值非visible

4、display值为inline-block、table-cell、table-caption、flex、inline-flex

5、position值为absolute、fixed

BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

2、计算BFC高度时浮动元素也参于计算（重点）

3、BFC的区域不会与浮动容器发生重叠（重点）

4、BFC内的容器在垂直方向依次排列

5、元素的margin-left与其包含块的border-left相接触

6、BFC是独立容器，容器内部元素不会影响容器外部元素

BFC功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；

2、可以利用BFC解决高度塌陷问题；

3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。

开启bfc之后

1.开启BFC 的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

常见margin重叠的两种方式：

  • 相邻两个相邻Box的margin


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>解决margin重叠</title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            .up,.down{
                width:200px;
                height: 200px;
                background: pink;
                margin:50px;
            }
        </style>
    </head>
    <body>
        <div class="up"></div>
        <div class="down"></div>
    </body>
</html>

效果图


image.png

解决办法：

在外层包一层div解决margin重叠，overflow:hidden开启新的BFC，使其不属于同一个BFC。

<body>
        <div class="up"></div>
        <div style="overflow: hidden;">
          <div class="down"></div>
        </div>
    </body>
image.png
  • 子父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>子父margin问题</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .wrap{
            width:300px;
            height: 300px;
            background: pink;
            /*overflow: hidden;*/
            /* border:1px solid black; */
        }
        .inner{
            width:150px;
            height: 150px;
            background: green;
            margin:50px auto;
            
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="inner">    
        </div>
    </div>
</body>
</html>

image.png

解决办法：

1、在父节点中 overflow：hidden开启新的BFC
2、在父节点外边描一个1px的框，隔开不在同一个BFC


image.png

什么是高度塌陷？怎么通过bfc解决？

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。这就是高度塌陷。

image.png

解决高度塌陷的方法，在发生塌陷的元素上:

  • 1 将父元素的高度固定（但不推荐，因为在后续更改样式会不太方便）
  • 2 在父元素结尾添加一个空的div,因为这个空的div并没有浮动，可将父元素内容撑 开，但会导致页面结构增加
  • 3 使用after伪类解决高度塌陷
.box1::after{
content:'';   ——内容不显示，无内容显示
display:block; ——after元素是一个行内元素，将它显示为一个块元素
}

2.开启BFC
BFC(间接 开启，或多或少会有一些不好的影响)BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区

开局已经说了怎么开启bfc了
1.设置元素的浮动（不推荐用来开启BFC）例如： float:left;
2.将元素设置为行内块元素（不推荐用来开启BFC）例如： display:inline-block;
3.将元素的overflow设置为一个非visible的值 overflow:hidden;
常用的方式为元素设置overflow:hidden;开启其BFC,以使其可以包含住它的子元素

上一篇： CSS 中的各种格式化上下文 - FC（BFC、IFC、GFC、FFC）

下一篇： 什么是 BFC（块格式化上下文）？它是如何工作的？

推荐阅读