是时候了解一下 ,你一直在使用,却不知道概念的CSS BFC

623 阅读5分钟

概念

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域

什么鬼? 干什么? 我用过?

其实就是你的页面,不信你看看

BFC创建的方法

  1. 根元素(<html>)
  2. 浮动元素 (元素的 float 不是 none)
  3. 绝对定位元素(元素的 positionabsolutefixed
  4. 行内块元素(元素的 displayinline-block
  5. 表格单元格(元素的 displaytable-cell,HTML表格单元格默认为该值)
  6. 表格标题(元素的 displaytable-caption,HTML表格标题默认为该值)
  7. 匿名表格单元格元素(元素的 displaytabletable-rowtable-row-grouptable-header-grouptable-footer-group(分别是HTML tablerowtbodytheadtfoot的默认属性)或 inline-table
  8. overflow 值不为 visible 的块元素
  9. display 值为 flow-root 的元素
  10. contain 值为 layoutcontentpaint 的元素
  11. 弹性元素(displayflexinline-flex元素的直接子元素)
  12. 网格元素(displaygridinline-grid 元素的直接子元素)
  13. 多列容器(元素的 column-countcolumn-width 不为 auto,包括 column-count 为 1)
  14. column-spanall 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中

看第一条根HTML元素,那不就是我们整个页面就是一个BFC;

BFC包含创建它的元素内部的所有内容,但是不包括创建了新BFC的子元素的内部内容

BFC布局规则:

  1. 内部的盒会在垂直方向一个接一个排列(就是平常我们块级元素的排列);
  2. 浮动盒区域不会与BFC重叠;
  3. 每个元素的margin的左边,与容器块border 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  4. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
  5. 处于同一个BFC中的元素相互影响,可能会发生margin(外边距)重叠;
  6. 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;

规则1 内部的盒会在垂直方向一个接一个排列

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
div {
    height: 50px;
}

.box1 {
    width: 400px;
    background-color: #82A6F5;
}

.box2 {
    width: 300px;
    background-color: #EAF048;
}

.box3 {
    width: 100px;
    background-color: #9FF048;
}

.box4 {
    width: 200px;
    height: 30px;
    background-color: #2A5200;
}

规则2 浮动盒区域不会与BFC重叠

蓝色盒子设置浮动,黄色盒子会与之重合

<div class="col1"></div>
<div class="col2"></div>

div {
    height: 400px;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}

创建BFC

使用overflow:hidden创建BFC

.col2 {
    /**创建BFC**/
    overflow: hidden;
	height: 500px;
    background-color: #EAF048;
}

规则3 每个元素的margin的左边,与容器块border 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此

<div class="col1"></div>
<div class="col2"></div>

body{
    border: 10px solid #000000;
}

.col1 {
    width: 400px;
    background-color: #82A6F5;
    float: left;
}

.col2 {
	height: 500px;
    background-color: #EAF048;
}

规则5 处于同一个BFC中的元素相互影响,可能会发生margin重叠(以最大的margin为准);

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>
.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
    margin-bottom: 50px;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    margin-bottom: 60px;
}

规则6 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算

图1
<div class="col">
    <div class="col1"></div>
    <div class="col2"></div>
</div>

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}

.col1 {
    width: 400px;
    height: 400px;
    background-color: #82A6F5;
}

.col2 {
    height: 500px;
    width: 400px;
    background-color: #EAF048;
    float: left;
}

图2

增加div.col overfloe:hidden;,创建了一个新的BFC高度增加

.col{
    border: 1px solid #2A5200;
    overflow: hidden;
}

咦? 怎么少了个规则4呢,其实仔细看看上面的例子都体现了布局规则4 - BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素

BFC能解决什么呢?

\color{#ff534d}{1.自适应两栏布局 (详见规则2的列子)}

\color{#ff534d}{2.让浮动内容和周围的内容等高,清除浮动 (详见规则6的列子)}

\color{#ff534d}{3.分属于不同的BFC时可以阻止外边距塌陷}

因为BFC内部的元素和外部的元素绝对不会互相影响,因此,当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动的高度。 避免外边距塌陷也是这样的一个道理。

结语

上面说的有些东西,其实在我们平常的布局中,已经有在使用这些规律,只是没有总结出来,如果写的不好之处欢迎批评指导。

如果你感觉你学会,点个赞呗!!!

参考链接:

Block Formatting Context

CSS中的BFC详解