浅谈BFC

最新推荐文章于 2022-09-14 16:41:18 发布

小鹅鹅鹅

最新推荐文章于 2022-09-14 16:41:18 发布

阅读量4.4k

点赞数 2

分类专栏： HTML CSS 文章标签：布局 html

本文链接：https://blog.csdn.net/ustl_lau/article/details/51305420

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

BFC（Block Formatting Context）

BFC定义：
　　BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，它规定了内部的块级元素如何布局，并且内部子孙元素布局与外部元素布局互不影响。
　　
BFC约束规则

内部的BOX会在垂直方向一个接一个放置
同属一个BFC的两个相邻元素的margin会发生重叠（也有说垂直方向margin，寒冬大神用writing-mode：tb-rl证明水平也会叠加，我是个渣渣不知道这算不算一种变相垂直）
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（BFC不会超出它的包含块）
BFC区域不会与float box重叠
BFC是页面上的一个隔离容器，子元素不会影响到外部元素
计算BFC高度时，float box 高度也参与计算

哪些元素会生成BFC
- 根元素
- float属性为none
- position属性为absolute或fixed
- display为inline-block，table-cell,table-caption,flex，inline-flex
- overflow不为visiblev

应用

1.防止margin重叠（demo取自寒冬）

<!doctype HTML>
<html>
<head>
<style type="text/css">

    #green {
        margin:10px 10px 10px 10px
    }
    #blue {
        margin:10px 10px 10px 10px
    }
    #red {
        margin:10px 10px 10px 10px
    }
    body {
        writing-mode:tb-rl;
    }

</style>
</head>
<body>

<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>

</body>
</html>

这里写图片描述

因为三个box同属一个BFC，所以可以看到margin发生重叠。想要防止重叠就要让box不属于一个BFC。
让绿色的box与其他两个不同属一个BFC

2.嵌套重叠

对于嵌套的margin重叠，取相关元素的margin最大值。

<!doctype HTML>
<html>
<head>
<style type="text/css">
    #green {
        margin:10px;
    }
    #blue {
        margin:10px;
    }
    body {
    }
    ul{
        margin:20px;
    }
    li{
        margin:25px;
    }
</style>
</head>
<div style="overflow: hidden">
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
    <ul>
        <li>1.</li>
        <li>2.</li>
        <li>3.</li>
    </ul>
</div>
</body>
</html>

图中取的li的margin值，因为它的值最大。
这里写图片描述

3.清除浮动

因为计算BFC高度时，浮动元素也参与计算。所以可以用overflow：hidden；触发BFC，撑开父元素达到清除浮动的效果。或者说包围浮动更贴切？
这里已经写了清除浮动，不再赘述。

4.多栏布局宽度自适应

BFC区域不会与float区域发生重叠，所以可以用来做宽度自适应。
三栏布局的实现

<!DOCTYPE html>
<html lang = "zh-cn">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
    .left{
        background: lightgreen;
        float: left;
    }
    .right{
        background: lightblue;
        float: right;
    }
    .center{
        background: lightpink;
        font-family: "微软雅黑"；
    }
</style>
    <body>
        <div class="left" style="width: 100px;height: 100px;">
        </div>
        <div class="right" style="width: 100px;height: 100px;">
        </div>
        <div class="center"style="overflow: hidden;">
        <p>   
        小鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅鹅
        </p>
        </div>
    </body>
</html>

将代码中center的overflow去掉会出现下面效果，原因是center没有触发BFC。
这里写图片描述

当在center中加入overflow:hidden;样式中间栏便触发了BFC。BFC区域不会与float区域重叠。这样就实现了一个简单的三栏布局。

这里写图片描述

总结：
BFC内部元素和外部元素不会相互影响，应用的地方有很多，有浮动元素时使用BFC应该注意BFC会通过变窄从而不与float重叠。布局时应考虑到此以防由此引发布局错乱。
BFC清除浮动也是很流行的一种方法。给布局提供了很大方便。

小鹅鹅鹅

关注

2
点赞
踩
0

收藏

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

浅谈个人对BFC的理解以及一下应用。BFC（Block Formatting Context）BFC定义：　　BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，它规定了内部的块级元素如何布局，并且内部子孙元素布局与外部元素布局互不影响。
复制链接

扫一扫