携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
1.BFC是啥
BFC(Block formatting contexts)
块格式化上下文,是一种特性,它决定了其子元素将如何布局,以及和其他元素的相互关系和作用
2.怎么触发BFC 特性
有以下六种方法
1.根元素(html)
2.浮动元素(元素的float不为none,为left.right)
3.绝对定位元素(元素的position为absolute或fixed)
4.行内块元素(元素的display为inline-block)
5.表格单元格(元素的display为table-cell,HTML表格单元格默认为该值)
6.overflow不等于visible,为 auto,scroll,hidden
3.BFC特性有什么作用?
作用有以下四点
1.包含内部浮动
2.可以排除外部浮动带来的影响
3.阻止外边距重叠
4.解决margin塌陷问题
1.包含内部浮动
display: flow-root
<!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{
border: 1px solid red;
}
.inner{
height: 100px;
width: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
解决方法
<!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{
border: 1px solid red;
/* 这个是c3新增,专门开启触发新特性的,不会额外的副作用 */
display: flow-root;
}
.inner{
height: 100px;
width: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
2.可以排除外部浮动带来的影响
<!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{
border: 1px solid red;
}
.inner{
height: 100px;
width: 100px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
<p class="article">
蜀道难
噫吁嚱，危乎高哉！蜀道之难，难于上青天！
蚕丛及鱼凫，开国何茫然！
尔来四万八千岁，不与秦塞通人烟。
西当太白有鸟道，可以横绝峨眉巅。
地崩山摧壮士死，然后天梯石栈相钩连。
上有六龙回日之高标，下有冲波逆折之回川。
黄鹤之飞尚不得过，猿猱欲度愁攀援。
青泥何盘盘，百步九折萦岩峦。
扪参历井仰胁息，以手抚膺坐长叹。
问君西游何时还？畏途巉岩不可攀。
但见悲鸟号古木，雄飞雌从绕林间
又闻子规啼夜月，愁空山。
蜀道之难，难于上青天，使人听此凋朱颜。
连峰去天不盈尺，枯松倒挂倚绝壁。
飞湍瀑流争喧豗，砯崖转石万壑雷。
其险也如此，嗟尔远道之人胡为乎来哉！
剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
所守或匪亲，化为狼与豺。
朝避猛虎夕避长蛇。
磨牙吮血，杀人如麻。
锦城虽云乐，不如早还家。
蜀道之难，难于上青天，侧身西望长咨嗟！
</p>
</div>
</body>
</html>
解决办法
.article{ 在style里添加这一行代码即可
display: flow-root;
}
3.阻止外边距重叠
<!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{
border: 1px solid red;
}
.inner1{
height: 100px;
width: 100px;
background-color: pink;
margin-bottom: 100px;
}
.inner2{
margin-top: 100px;
height: 100px;
width: 100px;
background-color: deeppink;
}
</style>
</head>
<body>
<!-- 处于同一BFC中,中间没有具有高度的元素隔开的话,外边距会重叠 -->
<div class="box">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>
解决办法
思考题: 为什么不直接给box设置display:flow-root属性
因为给box设置,没啥用,它们两还是处于同一级
4.解决margin塌陷
<!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{
width: 400px;
height: 400px;
background-color: green;
}
.inner{
height: 100px;
width: 100px;
background-color: pink;
margin-top: 100px;
}
/* 如果父元素没有border 和padding,给其子元素添加的margin-top样式会作用于父元素上 */
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
解决方法 右边的是,解决完毕后的结果
在 .box 里 加个 display:flow-root
