BFC（块级格式化上下文）及display相关知识

o-h-

已于 2022-06-14 09:22:51 修改

阅读量304

点赞数

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

于 2022-06-13 19:27:51 首次发布

原文链接：https://blog.csdn.net/wgh4318/article/details/117368029

版权

css 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

BFC（块级格式化上下文）

1、概念：

BFC是一个独立的区域，区域与区域之间不会互相影响。(BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素,外面的元素也不会影响到容器里面的子元素)

2、哪些元素会具有BFC的条件：

不是所有的元素模式都能产生BFC，w3c 规范：display 属性为 block, list-item, table 的元素，它们是用来可视化布局，会产生BFC.
这个BFC 有着具体的布局特性：（有宽度和高度，有外边距margin ，有内边距padding ，有边框 border）
在这里插入图片描述
补充：
元素的显示模式 display，分为块级元素（display：block；）、行内元素（display：inline；）、行内块元素（display：inline-block；），其实它还有很多其他显示模式，如下表：

display 的block、inline和inline-block的区别（面试题）
在这里插入图片描述
display: none、visibility: hidden、overflow: hidden 的区别

隐藏元素的方法

3、什么情况下可以让元素产生BFC：

元素有如下属性就可以触发 BFC：

浮动float属性不为none（左浮动float：left；右浮动float：right；继承父元素浮动float：inherit）
position为absolute或fixed
display为 inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
（overflow 一共有5个属性，如下：
1、overflow:auto ；内容会被修剪，超出设置的宽高后会出现滚动条
2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置
3、overflow:visible;这个是默认值，内容不会被修剪，会出现在元素框外面。
4、overflow:hidden;内容被修剪，多余的内容被隐藏
5、overflow:inherit;从父元素那里继承overflow的值。）

4、BFC元素所具有的特性：

BFC 布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由 margin 决定。属于同一个BFC的两个相邻盒子的 margin 会发生重叠
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
5. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
6. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度

5、BFC的应用场景：

5-1. 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。
在这里插入图片描述
解决问题的代码如下：

<div class="father">
    <div class="son1"></div>
    <div class="son2"></div>
</div>

  .father {
            width: 300px;
            border: 1px solid red;
			/*给father 创建了 BFC*/
			/* overflow: hidden; */
            /* float: left; */
            position: absolute;
        }
        .son1, .son2 {
            width: 100px;
            height: 100px;
            background-color: orangered;
            float: left;
        }
        .son2 {
            background-color: green;
        }

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
在这里插入图片描述
5-2. 解决外边距（margin）合并问题
属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。

解决问题的代码如下：

<div class="father">
	<!--over隔开，那么 son1 就和son1 不是同一BFC-->
    <div class="over"> 
        <div class="son1"></div>
    </div>
    <div class="son2"></div>
</div>

 .father {
            width: 300px;
            height: 350px;
            border: 1px solid red;
        }
        .son1, .son2 {
            width: 100px;
            height: 100px;
            background-color: orangered;
        }
        .son1 {
            margin-bottom: 50px;
        }
        .over {
            overflow: hidden;
        }
        .son2 {
            background-color: green;
            margin-top: 100px;
        }

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
在这里插入图片描述
5-3、制作右侧自适应的盒子问题

解决问题的代码如下：

<div class="father">
    <div class="box"></div>
    <div class="txt">我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子
        我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子我可以制作右侧自适应的盒子</div>
</div>

  .father {
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: orangered;
            float: left;
        }

        .txt {
        	/* txt盒子宽度 = father盒子宽度 - box盒子宽度 */
            height: 300px;
            background-color: green;
			/* 创建BFC 区域 不和浮动产生交集 紧贴制浮动的边缘 */
            overflow: hidden;
        }