什么是BFC?

Posted strong514

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了什么是BFC?相关的知识,希望对你有一定的参考价值。

什么是BFC?

  什么是BFC,听起来是不是有点蒙,听到这个词就知道它是一个简写,BFC 的全称为:块格式化上下文(Block Formatting Context,触发BFC的元素会独立出来一个渲染区域,让处于BFC内部的元素与外部的元素相隔离,使内外元素定位不会相互影响。简单来说:BFC能影响盒模型的渲染规范

怎么触发BFC?

  •   浮动元素 float属性为 left/right
  •   定位元素 position属性为 absolute 和 fixed
  •   display为inline-block, table-cell, table-caption, flex, inline-flex
  •   overflow:hidden;

  意外吗?都是我们每天都在用的CSS样式。以上任何属性都可以让元素触发BFC,改变该元素的渲染规范。

BFC的功能

 1、清除浮动

  先说常用的一点,对,你没有看错,这些属性可以清除浮动,话不多说,上实例看

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .wrap{
12                 padding: 5px;
13                 border: 10px solid #000;
14                 /*overflow: hidden;*/
15             }
16             .left, .right{
17                 width: 200px;
18                 height: 200px;
19                 float: left;
20             }
21             .left{
22                 background-color: pink;
23             }
24             .right{
25                 background-color: red;
26             }
27         </style>
28     </head>
29     <body>
30         <!--
31             现在父元素 .wrap 还没有清除浮动,先预览一遍看看
32             然后自己把我注释哪一行 CSS 解开注释再预览一下
33         -->
34         <div class="wrap">
35             <div class="left"></div>
36             <div class="right"></div>
37         </div>
38     </body>
39 </html>

 

  父元素的浮动已经清除,高度自适应了,不止是 overflow:hidden;可以,我上面写的那些属性都行,我就不一一写实例了,可以自己去试试。

 2、可以解决margin塌陷问题

  先说一下什么是margin塌陷,这可以说是一个CSS的小BUG,看下面实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                width: 300px;
                height: 300px;
                background-color: #333;
                margin-top: 50px;
                margin-left: 50px;
            }
            .wrap .sub{
                width: 100px;
                height: 100px;
                background-color: pink;
                margin-top: 20px;
                margin-left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="sub"></div>
        </div>
    </body>
</html>

 

  上面代码预览你会发现子元素的 margin-top 竟然没用了!这种BUG就叫做 margin 塌陷,怎么解决呢,先说一个笨办法,就是给父元素加一个border 或 border-top,就可以解决这个问题,还有一个办法就是把父元素转换为BFC格式,用浮动 float 、用定位 position 什么的都行,只要把父元素转换为 BFC 就行。说了这么多办法到底用哪个好呢?其实用哪个都不好,因为这些CSS样式都有自己的功能,比如说我用的定位,虽然解决了 margin 塌陷的问题,但是新问题出现了,这个元素脱离了文档流,影响了原来的布局,这在实际开发项目中可是大问题,那是不是这个BUG就没有办法解决了???不是,虽然这些CSS样式有自己的功能,你看用那条样式不影响你原来的布局就用那个,浮动不影响就用浮动,溢出隐藏不影响就用溢出隐藏,随机应变呗。

  其实 BFC 还有一些功能,这次我也就不一下子说完了,把以上两点掌握,可以说是对 BFC 有了初步了解,后期的文章我还会说到这。最后再告诉大家一个冷知识,定位和浮动可以把元素转换为 inline-block 行内块元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .wrap{
                border: 5px solid #333;
                padding: 5px;
                position: absolute;
            }
            .sub{
                width: 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <span class="wrap">
            <div class="sub"></div>
        </span>
    </body>
</html>

  感谢观看,批评指导

 

以上是关于什么是BFC?的主要内容,如果未能解决你的问题,请参考以下文章

BFC是什么?BFC有什么用?看完全明白

BFC是什么?如何形成BFC,有什么作用?

BFC(块级格式化范围)

什么是BFC?

bfc

BFC是什么?