谈谈BFC

最新推荐文章于 2023-01-06 15:33:58 发布

Vicky_ding

最新推荐文章于 2023-01-06 15:33:58 发布

阅读量465

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_33457248/article/details/80990842

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

谈谈BFC

介绍

BFC：（Block Formatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生外边距外边距合并
每个元素的margin box的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

如何生成BFC：

body 根元素
浮动元素：float 除 none 以外的值
定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

作用：

自适应两栏布局

每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反。即使存在浮动也是如此。我们可以利用原理BFC的区域不会与float box重叠，实现自适应两栏布局。

 <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，那么外部元素在计算高度时，外部元素内部的浮动元素child也会参与计算

<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;
        }

防止垂直方向margin合并
产生外边距合并原因：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生合并
解决方法：垂直方向上的外边距合并，可以在其中的以一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便不属于同一个BFC，就不会发生margin重叠了。
父元素与子元素发生外边距合并解决方法：给子元素或者父元素创建BFC
（1）给父元素创建BFC：overflow、float、position、display(即如何生成BFC（2-5）)
（2）给子元素创建BFC：float、position、display(即如何生成BFC（3-5）) （此处不能使用overflow）、给子元素外面包裹一层容器，并触发该容器生成一个BFC
（ps：应用原理BFC区域是一个独立的区域，不会影响外里面的元素。）

父元素与子元素发生外边距合并解决方法：给子元素或者父元素创建BFC

<style>
        .big {
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .small {
            width: 50px;
            height: 50px;
            margin-top: 50px;
            background-color: purple;
        }
 </style>

<body>
    <div class="big">
        <div class="small">
        </div>
    </div>
</body>

给父元素创建BFC：overflow、float、position、display(即如何生成BFC（2-5）)


        .big {
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
            overflow: hidden; 
            /* float: left; */
            /* position: fixed;
            /* display: inline-block; */
         }

给子元素创建BFC：float、position、display(即如何生成BFC（3-5）) （此处不能使用overflow）

        .small {
            width: 50px;
            height: 50px;
            margin-top: 50px;
            background-color: purple;
            /* float: left; */
            display: inline-block;
            /* position: fixed; *      }

给子元素外面包裹一层容器，并触发该容器生成一个BFC

<style>

    .big {

width: 100px; height: 100px; background-color: #ffc0cb; } .small { width: 50px; height: 50px; margin-top: 50px; background-color: purple; } .father { overflow: hidden; } </style></head><body> <div class="big"> <div class="father"> <div class="small"> </div> </div> </div></body>

介绍

BFC：（Block Formatting Context）：块级格式化上下文。它理解成一个独立的区域。

Vicky_ding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
谈谈BFC

谈谈BFC介绍BFC：（Block Formatting Context）：块级格式化上下文。它理解成一个独立的区域，此区域里面的子元素不会影响到外面的元素。反之也如此。BFC布局规则：内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生外边距外边距合并每个元素的margin box的左边，与包含块borderb...
复制链接

扫一扫