css中的BFC是什么？
本质：BFC就是符合一些特性的HTML标签。
在了解BFC的具体概念前，我们还需要简单了解下常见的定位方案
常见的定位方案
定位方案：
- 普通流
- 元素按照其在HTML中的先后位置至上而下自动排列布局；
- 行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一个完整的新行；
- 所有元素默认都是普通流。
- 浮动
- 元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或者右边偏移。
- 绝对定位
- 元素会整体脱离普通流，因此绝对定位不会对其兄弟元素造成影响。
BFC的概念
概念：
- BFC(Block Formatting Context) 格式化上下文；
- 指一个独立的渲染区域，或者说是一个隔离的独立容器；
- 可以理解为一个独立封闭的空间，无论如何不会影响到它的外面。
形成BFC的条件
条件：
- 浮动元素，float 除 none 以外的值；
- 绝对定位元素， position（absolute，fixed）；
- 设置元素的display属性为以下其中之一的值：inline-block，table-cell，table-caption，table-row，table，table-row-group，table-header-group，table-footer-group，inline-table，flow-root，flex或inline-flex，grid或inline-grid；
- 设置元素的display属性为除了 visible 以外的值（hidden，auto，scroll等）；
- body ，html等根元素就是一个独立的容器；
- contain值为layout，content 或 paint 的元素；
- 多列容器（元素的column-count 或 column-width属性不为 auto，包括 column-count为1时）。
BFC的特性
特性：
- 内部的div盒子会在垂直方向上一个接一个的放置；
- 垂直方向上的距离由各自的 margin属性决定；
- BFC的区域不会与设置了float浮动的元素区域重叠；
- 计算BFC的高度时，浮动元素也参与计算；
- BFC就是页面中的一个独立容器，容器里的子元素不会影响到外面的元素。
BFC的作用
- 避免外边距重叠；
- 清除浮动；
- 阻止元素被浮动元素覆盖。
归纳总结
- BFC属于普通流；
- BFC可以看做元素的一种属性，当元素拥有了BFC属性，就可以看作是隔离了的独立容器；
- 容器里的元素不会在布局上影响到外面的元素。
演示代码
在这里我们简单演示下常见的BFC的用法和作用。
新建一个div，不对其设置宽高，在里面放入一张图片
<style>
.box{
background: #ddd;
/*添加背景色是为了方便观察*/
}
.box img{
width: 300px;
/*限制好div的大小*/
}
</style>
<div class="box">
<img src="./images/星瞳.jpg" alt="">
</div>
此时它是这个样子
此时div被图片提供的空间撑开，检查发现div也拥有了自己的宽高
但是我们给图片浮动后，div却肉眼可见的消失了。
.box img{
width: 300px;
float: left;
}
检查发现，div确实失去了刚才图片提供的高度
这是因为浮动后的元素脱离了文档流，处于独立的区域。这个时候就需要使用到BFC，来让它回归原位，重新发挥它的作用。
.box{
background: #ddd;
overflow: hidden;
}
div重新拥有了高度，再次显示了出来。
但这个时候会用另外一个问题：浮动后的元素处于文档流之上，它占据的区域会与其它的兄弟元素相重叠。
给图片一个兄弟元素，获得下图效果
<h2>这是一段填充文字</h2>
文字的位置和图片重叠在了一起，此时给h2设置成BFC，就能解决问题。
.box h2{
overflow: hidden;
}
由此我们就可以基本了解到BFC的作用。
完整演示
这里再提供一份完整的演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
background: #ddd;
overflow: hidden;
}
.box img{
width: 300px;
float: left;
}
.box h2{
overflow: hidden;
}
</style>
</head>
<body>
<h1>CSS中的BFC是什么？</h1>
<div class="box">
<img src="./images/星瞳.jpg" alt="">
<h2>这是一段填充文字</h2>
</div>
</body>
</html>
这里是万物之恋，感谢各位小伙伴的关注，我们下次再见了！
7195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
