什么是BFC
概念:块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
我们先回顾一下之前常规块元素的问题
- 垂直方向上相邻的元素,
margin
会合并 - 父子关系的情况下,会产生
margin
塌陷 - 父子关系的情况下,父元素无视浮动元素会产生高度塌陷
- 兄弟关系的情况下,正常元素可能会被浮动元素覆盖(正常元素在浮动元素之后)
开启BFC的区域,是一块独立的渲染区域,互不干扰
BFC能够解决什么问题?
- 元素开启BFC之后,其子元素不会再产生
margin
塌陷问题 - 元素开启BFC之后,自己不会被其他浮动元素所覆盖
- 元素开启BFC之后,就算其子元素浮动,元素自身高度也不会塌陷
如何开启BFC?
- 根元素(
HTML
) - 浮动元素
- 绝对定位,固定定位的元素
- 行内块元素
- 表格单元格:
table
,thead
,tbody
,tfoot
,th
,td
,tr
,caption
overflow
的值不为visible
的块元素- 伸缩项目:父元素是弹性的
- 多列容器
column-span
为all
的元素display
的值,设置为flow-root
代码启动!
- 解决margin塌陷问题
<!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;
padding: 0;
}
/* 第五种方式:父元素为弹性盒 */
/*
body{
display: flex;
} */
.outer {
/* 第一种方式 */
/* float: left; */
/* 第二种方式:position为fixed或者absolute */
/* position: fixed; */
/* position:absolute */
/* 第三种方式 :overflow不为visible*/
/* overflow: hidden; */
/* 第四种方式:display是行内块元素; */
/* display: inline-block; */
/* 第六种方式 */
/* column-count: 1; */
/* 第七种方式 */
/* display: table; */
width: 400px;
background-color: red;
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: antiquewhite;
}
.inner2 {
background-color: pink;
}
.inner3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
</html>
- 父元素高度塌陷
<!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;
padding: 0;
}
/* 第五种方式:父元素为弹性盒 */
/*
body{
display: flex;
} */
.outer {
/* 第一种方式 */
/* float: left; */
/* 第二种方式:position为fixed或者absolute */
/* position: fixed; */
/* position:absolute */
/* 第三种方式 :overflow不为visible*/
/* overflow: hidden; */
/* 第四种方式:display是行内块元素; */
/* display: inline-block; */
/* 第六种方式 */
/* column-count: 1; */
/* 第七种方式 */
/* display: table; */
width: 400px;
background-color: red;
}
.inner {
width: 100px;
height: 100px;
}
.inner1 {
float: left;
background-color: rgb(145, 255, 0);
}
.inner2 {
float: left;
background-color: pink;
}
.inner3 {
float: left;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
</html>
第一个元素是正常元素,第二个元素是浮动元素,那么浮动元素会在正常元素的下面
第一个元素是浮动元素,第二个元素是正常元素,那么浮动元素会覆盖正常元素(正常元素钻到浮动元素的底下)
- 浮动元素覆盖未浮动元素
<!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;
padding: 0;
}
/* 第五种方式:父元素为弹性盒 */
/* body{
display: flex;
} */
div {
height: 100px;
width: 100px;
background-color: red;
}
.inner1 {
float: left;
background-color: rgb(145, 255, 0);
}
.inner2 {
/* 第一种方式 */
/* float: left; */
/* 第二种方式:position为fixed或者absolute */
/* position: fixed; */
/* position:absolute */
/* 第三种方式 :overflow不为visible*/
/* overflow: hidden; */
/* 第四种方式:display是行内块元素; */
/* display: inline-block; */
/* 第六种方式 */
/* column-count: 1; */
/* 第七种方式 */
/* display: table; */
overflow: hidden;
background-color: pink;
}
</style>
</head>
<body>
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</body>
</html>