BFC的触发条件

BFC（Block Formatting Context）的触发条件

　　BFC（Block Formatting Context ）块级格式化上下文，从字面的意思真的很难理解，我特别喜欢张鑫旭的 " CSS世界的结界 " 的叫法，非常的形象生动，看过火影的同学都知道，非常厉害的忍术都会形成结界，形成一个封闭的空间，里面的人出不来，外面的人进不去，BFC就是如此。

下面是BFC触发的条件，总结一下，没事的时候拿出来看看，增强自己的记忆。

1. float: left / right

2. position: absolute / fixed

3. overflow: auto / scroll / hidden

4. <html> 根元素

5. display: inline-block / table-caption / table-cell  

目前利用BFC特性最多的地方：margin-top 的合并问题，清除浮动问题；当出现BFC的时候这些问题就自然而然的解决了。

posted @ 2019-03-24 17:55  David-lcw  阅读(3592)  评论(0)    收藏  举报
My Google PageRank