css BFC及其作用简介

最新推荐文章于 2024-02-05 16:43:26 发布

头铁·娃

最新推荐文章于 2024-02-05 16:43:26 发布

阅读量714

点赞数 3

文章标签： css js css3

本文链接：https://blog.csdn.net/weixin_42130298/article/details/106139018

版权

一、BFC的定义

BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定元素如何对内容进行布局，以及与其他元素的关系和相互作用。------总的来说就是：该区域中的元素布局跟外部互不影响。

二、理解一下文档定位

1.正常情况下

HTML元素按照先后顺序从上到下，从左到右布局，其中块级元素被渲染成为一整行，而行内元素则从左到右排列，直至占满一行为止然后换行。

2.float–浮动

在浮动布局中，元素首先按照正常文档流的位置来出现，然后根据浮动的方向来选择向左边（float：left）或右边偏移 (float:right)。

3.relative\absolute\fixed\inherit(这里主要说一下float与普通文档流的区别，这些就不再多说)

三、BFC的触发方式

根元素(< html >)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

我们可以将触发了BFC的元素看作独立的个体，这个个体内部的布局变化不会对外部的元素的布局产生影响。

四、BFC的作用

1.解决外边距塌陷的问题

外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。

// An highlighted block
style type="text/css">
  .parent{
   width: auto;
   height: auto;
   border: 1px solid black;
  }
  div{
   width: 200px;
   height: 200px;
   margin-top: 100px;
   margin-bottom: 50px;
   border: 1px solid blue;
  }
 </style> 
<body>
     <div class="parent">
      <div></div>
      <div></div>
     </div>
</body>

在这里插入图片描述可以明显地看到间距只有100px。
我们可以采用声明两个BFC的方法来达到200px的外边距的效果，这里就不再尝试。

2. 清除浮动

先来看看这个问题;浮动元素会脱离普通文档流，由于容器内元素浮动，所以容器只剩下 2px 的边距高度。要让容器包含这个div我们要做的就是清除浮动。

// An highlighted block
<body>
     <div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>
</body>
![在