1. BFC的定义
BFC 是一种CSS概念,代表块级格式化上下文 是一个独立的渲染区域 BFC会影响当前元素和内部元素的布局 但不会影响跟外部元素之间的关系
2. 创建BFC的方法
1.将元素的 display 属性设置为 flex 或 grid。
2.将元素的 display 属性设置为 flex 或 grid。
3.将元素的 display 属性设置为 table、table-cell 或 table-caption。
4.将元素的 position 属性设置为 absolute 或 fixed。
5.将元素的 overflow 属性设置为 hidden、auto 或 scroll。
6.将元素的 float 属性设置为 left 或 right。
3. BFC的特点
外边距不重叠：在BFC内部的元素的外边距不会与外部元素的外边距发生重叠。
内容不被浮动影响：BFC内部的元素不会受到外部浮动元素的影响。
元素的高度：BFC会包含其内部的浮动元素，这样可以避免高度塌陷的问题。
4. 使用场景
清除浮动：通过给父元素添加BFC，可以包含其内部的浮动子元素，从而避免高度塌陷。
避免外边距合并：在需要保持元素外边距独立时，可以使用BFC。
布局控制：在复杂布局中，可以通过BFC来隔离某些元素的样式和行为。
5.BFC可以解决哪些问题？
1. margin合并 父元素的垂直方向上的margin大于子元素的 就会导致子元素的垂直方向上的margin不生效.我们只需要将父元素设置为一个BFC容器即可。（给父元素设置overflow:hidden或别的方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0
}
.container {
width: 300px;
height: 300px;
background-color: rgb(20, 218, 232);
/* overflow: hidden; *///给父元素设置overflow:hidden或别的方法
}
.left {
width: 200px;
height: 200px;
margin-right: 10px;
background-color: rgb(240, 153, 168);
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">子元素</div>
</div>
2. margin 塌陷：当子元素的垂直方向上的margin大于父元素的margin时（包括父元素不设置margin的情况），子元素的margin会设置到父元素身上（给父元素设置overflow:hidden或别的方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0
}
.container {
width: 300px;
height: 300px;
background-color: rgb(20, 218, 232);
/* overflow: hidden; */解决方法
}
.left {
width: 200px;
height: 200px;
margin-right: 10px;
background-color: rgb(225, 107, 127);
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">子元素</div>
</div>
</body>
</html>
3. 高度塌陷：当父元素不设置高度而子元素浮动时，父元素就会发生高度塌陷 父元素的高度变为0,#（给父元素设置overflow:hidden或display: table或别的方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
/* display: table; */
width: 200px;
background-color: plum;
}
.pink-box {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="pink-box"></div>
</div>
</body>
</html>
