目录
1. BFC概念BFC是什么
块级格式化上下文。BFC是一个区域,也是一个独立的运行环境,其中的元素是不受上下文的布局的影响。上下文也不会影响里面的布局区域
2. BFC触发的条件
overflow:hidden;【hidden值最常用。但只要不为visible的值即可】
float: none以外的值;
position:absolute;
position:fixed;
display: flex | inline-block | table-cell | table-caption;【注意有时要额外的设置宽度高度】
3. BFC的布局应用:
直接来代码
3.1 第一种情况:
如果同属于一个BFC区域,垂直方向上的盒子上下会发生margin重叠
如下面代码
HTML
<div>
<p>我是第一个p标签</p>
<p>我是第二个p标签</p>
</div>
CSS
p {
height: 200px;
background-color: pink;
margin: 40px;
}
从上面的代码可以看到,两个p标签在一个div里面,就在一个BFC区域里面。
从上面两幅图可以看出。无论检查哪一个p标签,上面margin都是30px,但是这个上面30px的边距是重叠了的。
如何达到【不想要两个p之间存在上下边距重叠】的目的?
HTML修改
<div>
<p>我是第一个p标签</p>
</div>
<p>我是第二个p标签</p> // 这个部分是修改过的。让两个p标签属于不同的BFC区域
CSS修改
div {
overflow: hidden; // 这个部分是新增的。
}
p {
height: 200px;
background-color: pink;
margin: 40px;
}
问:上面修改了哪一个部分?
1.修改了第二个p标签的位置。让两个p标签处于不同的位置
2.修改了父盒子的样式,增加了overflow:hidden属性,
3.实现了效果:如下图。现在两个p标签之间的上面边距不存在重叠的情况
如下图,消除了margin上面的重叠
也可以不修改p标签的位置,而是在两个p标签之间添加一个空标签div而不是空p,设置样式为overflow:hidden
<div style="overflow: hidden"></div>
总结一下:
BFC的一个特点是,一个BFC内部区域的上下盒子的margin值会发生重叠。我们可以通过,两个盒子设置到不同的BFC区域来消除margin。
3.3 清除浮动的应用
父元素没有设置高度
子元素浮动,导致父元素高度很小很小
HTML:
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<div class="brother"></div>
CSS
ul {
width: 800px;
border: 10px solid red;
}
li {
float: left;
width: 200px;
height: 200px;
background-color: pink;
list-style: none;
}
.brother {
width: 100%;
height: 20px;
background-color: blue;
}
如上图,发现父元素设置了红色边框,挤成一坨,高度很小。不仅如此,蓝色盒子也受到了影响,往上挤。
这个时候给父元素设置一些指定属性,如overflow:hidden,就可以解决这个问题
ul {
width: 800px;
border: 10px solid red;
overflow: hidden;
}
如上图所示。不仅ul能够包裹小li,此时检查ul的高度,也会把浮动的小li的高度算进去。
总结一下:
如果父盒子没有设置高度,子盒子设置了高度,子盒子无法撑开父盒子,父盒子宽度很窄。
我们可以通过父盒子设置属性触发成BFC区域,解决这个问题。
3.4 阻止元素被浮动元素遮挡【左右自适应问题】
HTML
<div class="bro1">这是浮动的元素</div>
<div class="bro2">这是不浮动的元素</div>
CSS
.bro1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
opacity: .5;
}
.bro2 {
/* overflow: hidden; */
width: 300px;
height: 400px;
background-color: blue;
}
此时页面布局如下图
蓝色盒子有一部分被粉色盒子遮挡,虽然文字可以正常显示,但我们不想要那部分被遮挡。可以给蓝色盒子触发BFC
.bro2 {
overflow: hidden;
width: 300px;
height: 400px;
background-color: blue;
}
如上图代码,给蓝色盒子设置overflow:hidden以后,该盒子触发了BFC,BFC盒子的一个特点,不会和float盒子发生重叠,左侧粉色盒子是浮动盒子。
总结一下:
如果出现了浮动盒子遮挡了另一个盒子【此时这个盒子没有触发BFC】,我们可以给它触发BFC,来让它不被遮挡。
3.5 解决父子盒子塌陷问题
我们都知道父盒子的子盒子设置了margin-top,可以通过很多方法解决这个问题。比如父盒子设置overflow:hidden,但是这个解决方法的本身就是让父盒子触发了BFC。
如下面的代码和图片
<div class="father">
<div class="son">这是子盒子</div>
</div>
.father {
width: 400px;
height: 400px;
background-color: pink;
/* overflow: hidden; */
/* position: fixed; */
/* position: absolute; */
/* display: inline-block; */
/* display: table-caption; */
/* display: table-caption; */
}
.son {
width: 300px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
修改以后
.father {
width: 400px;
height: 400px;
background-color: pink;
<!--增加这个属性后-->
overflow: hidden;
/* position: fixed; */
/* position: absolute; */
/* display: inline-block; */
/* display: table-caption; */
/* display: table-caption; */
}
总结一下:
当子盒子在盒子内部设置了margin-top的值,导致了父子盒子塌陷的问题,我们可以给父盒子触发BFC效果,解决这个问题。
综上:
1. BFC是什么?是一个块级格式化区域【环境】。
2. BFC区域内部的布局有一些特点:
计算BFC高度时,会算入浮动的子盒子的高度
内部盒子margin上下会发生重叠
BFC区域不会受浮动元素的影响【BFC容器里面的子元素不会影响外面的元素,外面的元素也不会影响里面的子元素】
3. BFC的触发条件
overflow:hidden;【hidden值最常用。但只要不为visible的值即可】
float: none以外的值;
position:absolute;
position:fixed;
display: flex | inline-block | table-cell | table-caption;【注意有时要额外的设置宽度高度】
4.BFC的解决的问题
父子盒子内边距塌陷
盒子上下的margin重叠
清除浮动的问题
布局左右自适应的情况
参考了文章:
1. BFC概念和清除浮动_妖无涯的博客-CSDN博客_bfc清除浮动
2. BFC详解 - 简书
结尾:
学习id: 201903090124-15
现在是大三学生,学习到了前后端交互的身份认证阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。
如果这篇文章有内容侵权,请及时告知删除。
如果这篇文章对你有帮助,可以点个赞鼓励一下嘛哈哈哈