简述BFC的原理及其应用

目录

一、常见定位方案

二、BFC概念

三、BFC触发条件以及规则

四、应用场景

防止margin重叠(塌陷)

         清除内部浮动 

自适应多栏布局

小结


 

一、常见定位方案

(1)普通流

元素按照其在html的先后位置由上而下布局。

(2)浮动布局(float)

元素先按照普通流的位置出现,然后根据浮动方向尽可能的向左或向右偏移。

(3)绝对定位(absolute)

在绝对定位布局中,元素会脱离文档流。

二、BFC概念

BFC块级格式上下文,属于定位方案中的普通流。

具有BFC特性的元素可以看作是隔了的独立容器,容器里的元素不会在布局上影响到外面的元素。简单的说:可以理解BFC是要给封闭的大箱子,箱子内的元素无论如何交换,都不会影响到外面的元素。

三、BFC触发条件以及规则

1、body根元素;

2、浮动元素float的值不为none;

3、绝对定位元素:positon(absolute、fixed);

4、display的值为:display(block、inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid);

5、overflow:除了visible以外的值;(hidden、scroll、auto);

四、应用场景

利用BFC的特性,我们将BFC应用在以下场景:

防止margin重叠(塌陷)

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <p>Hehe</p >
</body>

 页面显示如下:

两个p元素之间的距离为100px,发生了margin重叠(塌陷),以最大的为准,如果第一个P的margin为80的话,两个P之间的距离还是100,以最大的为准。

前面讲到,同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器,并触发这个容器生成一个BFC,那么两个p就不属于同一个BFC,则不会出现margin重叠

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>

 这时候,边距则不会重叠:

清除内部浮动 

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

 页面显示如下:

 而BFC在计算高度时,浮动元素也会参与,所以我们可以触发.par元素生活才能BFC,则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

 实现效果如下:

自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

 效果图如下:

前面讲到,每个元素的左外边距与包含块的左边界相接触

因此,虽然.aslide为浮动元素,但是main的左边依然会与包含块的左边相接触

BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC,以此适应两栏布局

.main {
    overflow: hidden;
}

这时候,新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度,和.aside的宽度,自动变窄

效果如下:

小结

可以看到上面几个案例,都体现了BFC实际就是页面一个独立的容器,里面的子元素不影响外面的元素。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值