<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC的理解</title>
<style>
.fa{
width: 200px;
height: 200px;
background-color: aqua;
overflow:hidden;
}
.son {
width: 100px;
height: 100px;
margin-top: 30px;
background-color: blue;
}
</style>
</head>
<body>
<!-- BFC的理解: 它是指一个独立的块级渲染区域,改区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关 -->
<!-- 这种情况下fa盒子就没有形成BFC,就导致了margin塌陷的问题,就是son盒子不是相对于fa盒子margin了30px,而是在fa盒子的外部margin了30px -->
<!-- 创建BFC的方法
1、float的值不是none
2、position的值不是static或者relative
3、display的值是inline-block、flex或者inline-flex
4、overflow:hidden(此方法也是最推荐使用的) -->
<!-- 此时在fa盒子中添加overflow:hidden的样式就不会出现margin塌陷的问题了 -->
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>
扫一扫
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
