目录
1.定位元素为absolute或者fixed时，脱离文档流和文本流
2. 元素的float属性值不为none，脱离文档流、但是不脱离文本流
1. 防止两个相邻块级元素的上下margin值发生重叠 -> 上下margin合并问题
3.实现自适应布局，防止元素被浮动元素覆盖 -> 左边固定，右边自适应
前言
什么是BFC？
BFC的形成条件
BFC的应用场景
一、BFC是什么？
BFC 是块级格式化上下文，是在盒模型下对块级元素进行布局的独立渲染区域，该渲染区域内的元素和区域外的元素是相互隔离的。不同BFC内部的元素互不影响。
二、BFC的形成条件
2.定位元素：元素的position属性值为absolute或者fixed时，脱离文档流和文本流
3.浮动元素：元素的float属性值不为none，脱离文档流、但是不脱离文本流
4.visibility属性：元素的visibility属性值不为visible时
5.布局：布局为inline-block、flex、table-cell、grid时
1.定位元素为absolute或者fixed时，脱离文档流和文本流
源码：
<!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>
.left {
position: fixed;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 80px;
height: 300px;
background-color: red;
}
.box {
position: relative;
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
}
.box1 {
position: absolute;
top: 0;
left: 0;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="left">固定定位</div>
<div class="box">
不是定位元素
<div class="box1">绝对定位</div>
</div>
</body>
</html>
2. 元素的float属性值不为none，脱离文档流、但是不脱离文本流
源码：
<!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>
.left {
float: left;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
.right {
float: right;
right: 0;
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
不是浮动元素
<div class="left">浮动元素1</div>
<div class="right">浮动元素2</div>
</div>
</body>
</html>
三、BFC的应用场景
1. 防止两个相邻块级元素的上下margin值发生重叠 -> 上下margin合并问题
属于同一BFC的，相邻块级元素的margin值会重叠，如果想让它们不重叠，可以让两个块级元素分别属于不同的BFC。
以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了20px的外边距，期望它们之间的间距是 40px，但实际效果却只有 20px）：
<style>
.box1 {
width: 200px;
height: 100px;
/* 下边距20px */
margin-bottom: 20px;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
/* 上边距20px */
margin-top: 20px;
background-color: skyblue;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
想让上下边距不合并，需要其中一个盒子触发BFC：
<style>
.box1 {
/* 触发BFC */
display: inline-block;
width: 200px;
height: 100px;
/* 下边距20px */
margin-bottom: 20px;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
/* 上边距20px */
margin-top: 20px;
background-color: skyblue;
}
</style>
2. 清除浮动
以下示例代码实现时，父元素容器box1的高度为0。父元素box1没有设置高度，希望由子元素的高度撑开box1的高度，但是子元素box2都为浮动元素，在这种情况下，父元素的高度不能自适应的伸开，并且会将内容溢出到box1容器外部，这种现象叫浮动溢出。
<style>
.box1 {
/* 父元素只有宽度，没有高度，希望由子元素撑开 */
/* 当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素 */
/* 在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象
这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 */
width: 200px;
background-color: red;
}
.box2 {
float: left;
background-color: green;
}
</style>
<div class="box1">
<div class="box2">Hello,world</div>
<div class="box2">Hello,world</div>
<div class="box2">Hello,world</div>
</div>
解决这一问题的方法之一就是触发BFC清除浮动。
<style>
.box1 {
/* 父元素只有宽度，没有高度，希望由子元素撑开 */
/* 当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素 */
/* 在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象
这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 */
width: 200px;
background-color: red;
/* 清除浮动 */
overflow: hidden;
}
.box2 {
float: left;
background-color: green;
}
</style>
3.实现自适应布局，防止元素被浮动元素覆盖 -> 左边固定，右边自适应
以下示例中，box2 会被设置了浮动的 box1 覆盖：
<style>
.box1 {
float: left;
/* 左边固定宽度 */
width: 300px;
background-color: red;
height: 200px;
}
.box2 {
/* 右边不设置宽度 */
background-color: blue;
height: 300px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
解决这一问题的方法之一就是让右边的box2触发BFC，达到不被覆盖的效果。
<style>
.box1 {
float: left;
/* 左边固定宽度 */
width: 300px;
background-color: red;
height: 200px;
}
.box2 {
/* 右边不设置宽度 */
background-color: blue;
height: 300px;
/* 触发BFC */
overflow: hidden;
}
</style>
本文含有隐藏内容，请 开通VIP 后查看