BFC总结和使用

BFC小结

前言

在写css样式时,可能是添加了一个样式后就达到了预期效果。有没有想过,是我们在不经意间触发了什么,帮助我们达到了效果?本文就快速介绍下css样式中经常使用的BFC,主要包括以下几个方面:

  1. 什么是BFC
  2. 如何生成BFC
  3. BFC的布局规则
  4. 应用

什么是BFC

首先看下什么是Formatting Context

  • CSS2.1规范中的一个概念
  • 它是指页面中的一块渲染区域,并拥有一套渲染规则,它决定了其子元素将如何定位,以及与其他元素的关系和相互作用。最常见的Formatting Context有BFC(Block Fomatting Context)和IFC(Inline Formatting Context)
  • CSS2.1 中只有BFC和IFC,CSS3中还增加了GFC和FFC

BFC

块级格式化上下文,它是一个独立的渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,并且与这个区域外部无关。

如何生成BFC

CSS2.1规定满足下列CSS声明之一的元素便会生成BFC:

  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption、flex、inline-flex
  • position的值为absolute或者fixed

BFC的布局规则

  1. 内部的元素会在垂直方向上一个接一个的放置;
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠;

可应用到解决margin重叠的问题中:

可在其中一个元素外包裹一层容器,并触发该容器生成BFC(overflow:hidden;),这样两个元素就不属于同一个BFC了,就不会发生margin重叠的问题了。下面应用中会举例阐述。

  1. 生成BFC元素的子元素中,每一个子元素的margin与包含块的左边界border相接触(对于从左到右的格式化,否则相反),即使存在浮动也是如此;
  2. BFC的区域不会与float元素区域重叠

可应用到两栏布局中:

一个元素是浮动元素,可触发另一个非浮动元素生成BFC(overflow:hidden;)。由于“BFC的区域不会与float元素区域重叠”,因此可以实现两栏布局。下面应用中会举例阐述。

  1. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
  2. 计算BFC的高度时,浮动元素也参与计算

可应用到解决浮动元素的父元素高度塌陷问题中:

如果父元素的子元素都是浮动元素,那么父元素的高度会发生高度塌陷(height:0)。可触发父元素生成BFC(overflow:hidden;)那么在“计算BFC的高度时,浮动元素也参与计算”,实现清除了内部浮动的效果。下面应用中会举例阐述。

应用

在上述BFC的布局规则中已经简单介绍了下3个利用BFC布局规则的实例了,下面按序分别举例说明:

解决margin重叠的问题

举例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BFC的应用:解决margin重叠问题</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container p {
            margin: 25px 10px;
            background-color: palevioletred;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>the first line</p>
        <p>the second line</p>
        <p>the third line</p>
    </div>
</body>

</html>

效果:

19862811-8bd6bd8447f4988b
image

以第一行来看,它距离顶部的垂直距离,和距离第二行的垂直距离是一样的。说明第一行的margin-bottom和第二行的margin-top发生了重叠,不然第一行到第二行的距离,应该是50px,是第一行距离顶部距离的两倍。

解决方法上面已经介绍过:可在其中一个元素外包裹一层容器,并触发该容器生成BFC(overflow:hidden;),这样两个元素就不属于同一个BFC了,就不会发生margin重叠的问题了。

据此修改:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BFC的应用:解决margin重叠问题</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container p {
            margin: 25px 10px;
            background-color: palevioletred;
            border: 1px solid black;
        }

        .wrap {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>the first line</p>
        <div class="wrap">
            <p>the second line</p>
        </div>
        <p>the third line</p>
    </div>
</body>

</html>

效果

19862811-ef59b6e36c571b7f
image

这样就解决了margin重叠的问题

两栏布局问题

两栏布局有很多解决方案,比如用flex,这里介绍BFC的解决方案

举例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BFC的应用</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            border: 1px solid black;
        }

        .left {
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            float: left;
        }

        .right {
            width: 300px;
            height: 400px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

效果:

19862811-4e4d1c801bbbf802
image

左栏是浮动元素,会脱离文档流,浮在文档流元素上。

BFC的解决方法:

可触发另一个非浮动元素生成BFC(overflow:hidden;)。由于“BFC的区域不会与float元素区域重叠”,因此可以实现两栏布局。

修改.right的样式:

.right {
  ...
  overflow: hidden;
}

效果

19862811-5778acd4c3bac159
image

不过我个人觉得这样做只是让BFC的区域不会与float元素区域重叠,实现了两栏布局效果,但并不是自适应的两栏布局,上述例子只是刚好父容器的宽度=左盒子宽度+右盒子宽度(大于时也可以)。如果把父容器的container的宽度,设为一个小于左盒子的宽度+右边盒子的宽度值(200px+300px),如400px时,就会看到这样的效果:

19862811-7611fa79e4f3851d
image

说明左右两个盒子并不会自动调整宽度来自适应的布局。

要想实现自适应的两栏布局也很简单,直接设置父元素的display:flex;即可。

修改样式:

.container {
  ...
  display: flex;
}

右盒子不需要设置overflow:hidden;

效果:

19862811-4a6985137a248d44
image

可以看出左右盒子都按比例调整了自身的宽度:

200px:300px=2:3,

左栏新宽度=2/(2+3)*400=160px;

右栏新宽度=3/(2+3)*400=240px;

结果也确实如此:

左栏:

19862811-e6736cf55bdc9240
image

右栏:

19862811-17e25356051cc41b
image

解决浮动元素的父元素高度塌陷的问题

举例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BFC的应用:解决浮动问题</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            border: 1px solid black;
        }

        .left {
            width: 200px;
            height: 200px;
            background-color: palevioletred;
            float: left;
        }

        .right {
            width: 300px;
            height: 400px;
            background-color: skyblue;
            float:left;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>

效果:

19862811-c9e9a353a4215fc3
image

如果父元素的子元素都是浮动元素,那么父元素的高度会发生高度塌陷。

解决方法:

可触发父元素生成BFC(overflow:hidden;)那么在“计算BFC的高度时,浮动元素也参与计算”,实现清除了内部浮动的效果。

修改样式,让父元素生成BFC:

.container {
  ...
  overflow: hidden;
}

效果:

19862811-63089d11d3998a63
image

父元素的高度被撑起来了,为右盒子的高度400px;

小结

关于BFC的内容也是属于老生常谈的问题,关于BFC只需要知道,使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则可以达到一定的布局效果。为了达到特定的布局效果,我们让元素生成BFC

本文内容摘自 管鲍切思世所稀

其他

联系

如果大家有兴趣,关注公众号:_facebook(web技术进阶),查看更多优质文章,欢迎大家加入我的前端交流群:866068198 ,一起交流学习前端技术。博主目前一直在自学Node中,技术有限,如果可以,会尽力给大家提供一些帮助,或是一些学习方法.

  • 公众号
19862811-000c818706a05086.jpg
image
  • 群二维码
19862811-8de9bc3f195d3fa1.jpg
image

福利

有需要刷钻,刷会员,刷腾讯视频会员,涨粉丝等等相关意向的小伙伴们,可以访问作者推荐的超值代刷网站:http://qq.usword.cn, 也可以扫描下方二维码

  • 福利二维码
19862811-cc2c6b51f9e7371f.png
image

最后

If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值