小聊BFC | 易学教程

“不起眼”的BFC

BFC这个词可能之前没怎么听过，可是稍微接触过前端的人都知道css中有点小坑啊!!!!
今天想要跟大家分享一下个人对于BFC的一个理解。如有不足或理解错误的地方，还望各位大佬指出，哈哈，感激感激。要是喜欢的话，也不妨点个赞啊。

*1.BFC 的定义：

* **BFC** （**Block fomatting context**）：是一个独立的渲染区域，只有块级元素参与，规定了内部的块级元素如何布局，并与区域外部的毫不相干。

*2.BFC 的创建：

overflow 的值不为visible
float 的值不为none
position 的值不为static
display 的值为inline-block、table-cell、table-caption（因为table会默认生成一个匿名的table-cell,而table-cell又会生成BFC）

*3.BFC应用

元素垂直方向上下重叠(margin大的值会覆盖小的值，而不是两值之和)

.box p {
  margin: 10px 0;
  background-color: yellow;
}
.box p:nth-child(1) {
  margin-bottom: 25px;
}

效果如下：

解决方法：

<div class="box" id="box">
    <p>Lorem ipsum dolor sit.</p>
    <div style="overflow:hidden;">
        <p>Lorem ipsum dolor sit.</p>
    </div>
    <p>Lorem ipsum dolor sit.</p>
  </div>

效果如下：

解决侵占浮动元素的问题

  .one {
  width: 100px;
  height: 100px;
  background-color: pink;
}
.two {
  height: 100px;
  background-color: red;
  width: 100px;
}

效果图：

解决方法：

.one {
  float: left;
  width: 100px;
  height: 100px;
  background-color: pink;
}
.two {
  height: 100px;
  background-color: red;
  float: left;
  width: 100px;
}

效果图：

总而言之，BFC就是利用一个块级元素，让里面的元素不受外部元素的影响。

来源：https://www.cnblogs.com/jlfw/p/12190020.html

标签

bfc