文章目录
前言
常见的定位方式有三种
- 普通流（normal flow）
- 浮动（float）
- 绝对定位（absolute）
一、BFC是什么？
BFC（Block formatting context）直译为“块级格式化上下文”，它属于上述定位方案的普通流。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
通俗一点讲，可以把BFC理解为一个封闭的盒子，盒子内部的元素无论如何变化，都不会影响到外部。
二、触发BFC的条件
只要元素满足下面任一条件即可触发BFC特性
1.body根元素
2.浮动元素：float除none以外的值（left、right）
3.绝对定位元素：position（absolute、fixed）
4.display（inline-block、table-cell、flex）
5.overflow除visible以外的值（hidden、auto、scroll）
三.BFC的作用
1.避免margin重叠
<body>
<div class="box1">1</div>
<div class="box2">2</div>
</body>
.box1,
.box2 {
width: 60px;
height: 60px;
border: 1px solid #000;
}
.box1{
margin-bottom: 30px;
}
.box2{
margin-top: 30px;
}
图示：
原因：
.box1和.box2都在同一个BFC容器中（指body元素），所以发生了margin塌陷
解决办法
将.box1和.box2放在两个BFC容器中
<body>
<div class="container">
<div class="box1">1</div>
</div>
<div class="container">
<div class="box2">2</div>
</div>
<body>
.container{
overflow: hidden;
}
图示：
2.清除浮动
<div class="outer">
<div class="inner1"></div>
</div>
.outer{
width: 300px;
border: 1px solid #000;
}
.inner1{
width: 100px;
height:100px;
background: turquoise;
float: left;
}
图示：
原因：
由于.inner1发生浮动，脱离了文档流，所以.outer的高度未被.inner1高度撑起
解决办法
触发.outer的BFC特性，.outer会包裹浮动元素
.outer{
/* display: flex; */
/* overflow: hidden; */
position: absolute;
}
图示：
3.两列自适应布局
<div class="box1"></div>
<div class="box2">jhhaa</div>
.box1 {
width: 100px;
height: 100px;
background: turquoise;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background: lightcoral;
}
图示：
原因：
由于.box1发生浮动，所以.box2元素一部分被.box1遮挡（文字属于普通流，不会被遮挡）
解决办法
触发.box2的BFC特性（BFC不会与float重叠）
.box2{
/* overflow: hidden; */
display: table-cell;
/* position: absolute(fixed); 不可以实现效果 */
}
图示：
扫一扫
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
