BFC认识 --CSS

1.什么是BFS？

首先我们应该了解到垂直margin坍塌（重叠），非常经典的BUG；

block Formatting context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC 定义

　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

如何触发BFC？

　　1.position：absolute

　　2.float：left/right

　　3.display：inline-block

　　4.overflow：hidden

看如下页面：

 1 <style>
 2     p {
 3         color: #f55;
 4         background: #fcc;
 5         width: 200px;
 6         line-height: 100px;
 7         text-align:center;
 8         margin: 100px;
 9     }
10 </style>
11 <body>
12     <p>Haha</p>
13     <p>Hehe</p>
14 </body>

页面:

 

仔细观察，上面的两个P标签margin重叠，根据规则

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。
　　代码：

<style>
    .wrap {
        overflow: hidden;
    }
    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>

页面:

 

posted @ 2017-10-17 17:24  im.lhc  阅读(148)  评论(0)    收藏  举报