浅谈BFC

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值