关于BFC外边距穿透问题

最新推荐文章于 2022-06-13 21:34:11 发布

熊可爱

最新推荐文章于 2022-06-13 21:34:11 发布

阅读量304

点赞数 1

文章标签： Web 前端 BFC 外边距重合

本文链接：https://blog.csdn.net/qq_43060624/article/details/82858888

版权

什么是BFC？
BFC（Block Fromatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。
w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
BFC的特性
1,内部的Box会在垂直方向，一个接一个地放置。
2,Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生外边距合并
3,每个元素的margin box的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4,BFC的区域不会与float box重叠。
5,BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。计算BFC的高度时，浮动元素也参与计算
作用：
1,创建BFC来避免垂直外边距叠加创建BFC来避免垂直外边距叠加
产生外边距合并原因：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生合并解决方法：垂直方向上的外边距合并，可以在其中的以一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便不属于同一个BFC，就不会发生margin重叠了。
2, 父元素与子元素发生外边距合并解决方法：
1，给子元素或者父元素创建BFC
（1）给父元素创建BFC：overflow、float、position、display(即如何生成BFC)
（2）给子元素创建BFC：float、position、display（即如何生成BFC （此处不能使用overflow））、给子元素外面包裹一层容器，并触发该容器生成一个BFC
2,创建BFC来清除浮动

<style>
        .big {
            width: 300px;
            background-color:pink; 
            border: 1px solid blue;
        }
        .small {
            width: 100px;
            height: 100px;
            background-color: purple;
            border: 1px solid #ccc;
            float: left;
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>
`
.big {
            width: 300px;
            background-color:pink; 
            border: 1px solid blue;
            overflow: hidden;
        }

3,创建BFC来实现自适应布局
在这里插入图片描述

 <style>
       .big {
            margin-top:200px;
            margin-left:200px;
            width: 200px;
            height: 200px;
            background-color:pink;
        }
 
        .small-1 {
            width: 100px;
            height: 150px;
            background-color: purple;
            float: left;
        }
        .small-2 {
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
 
<body>
    <div class="big">
        <div class="small-1">
        </div>
        <div class="small-2">
        </div>
    </div>
</body>

    .small-2 {
        height: 200px;
        background-color: deeppink;
        overflow: hidden;
    }

一个BFC会停止去围绕浮动元素。在有浮动元素的列类型布局中常用到。如果一个元素创建了BFC，它就不会去围绕（或者说包裹）任何浮动元素。

熊可爱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于BFC外边距穿透问题

什么是BFC？BFC（Block Fromatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。w3c规范中的BFC定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级...
复制链接

扫一扫