什么是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>

　　感谢观看，批评指导

 

posted @ 2019-11-04 20:51  鹿长生i  阅读(903)  评论(1)  编辑  收藏  举报