小聊BFC

darkerXi 发布于2019-08-29 13:55 / 3321人阅读

摘要：不起眼的这个词可能之前没怎么听过，可是稍微接触过前端的人都知道中有点小坑啊今天想要跟大家分享一下个人对于的一个理解。的定义是一个独立的渲染区域，只有块级元素参与，规定了内部的块级元素如何布局，并与区域外部的毫不相干。

“不起眼”的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;
}

效果如下：

解决方法：


    Lorem ipsum dolor sit.
    
        Lorem ipsum dolor sit.
    
    Lorem ipsum dolor sit.

效果如下：

解决侵占浮动元素的问题

  .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就是利用一个块级元素，让里面的元素不受外部元素的影响。

GPU云服务器云服务器 bfc bfc布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112800.html

小聊BFC

摘要：不起眼的这个词可能之前没怎么听过，可是稍微接触过前端的人都知道中有点小坑啊今天想要跟大家分享一下个人对于的一个理解。的定义是一个独立的渲染区域，只有块级元素参与，规定了内部的块级元素如何布局，并与区域外部的毫不相干。不起眼的BFC BFC这个词可能之前没怎么听过，可是稍微接触过前端的人都知道css中有点小坑啊!!!!今天想要跟大家分享一下个人对于BFC的一个理解。如有不足或理解错误的...

bawn 2019-08-02 15:58 评论0 收藏0
CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

岳光 2019-08-30 15:55 评论0 收藏0
CSS BFC特性(块级格式化上下文)

摘要：元素的特性全称为，中文为块级格式化上下文。应用之利用特性解决塌陷问题塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个，另一个设置，此时两个元素的就会发生重叠。 1、元素的BFC特性 BFC全称为Block Formartting Context，中文为块级格式化上下文。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相...

chanthuang 2019-08-02 14:09 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

April 2019-08-29 12:56 评论0 收藏0