bfc的应用场景
在子元素里面加margin 会在父元素外边生效
margin的传递问题
没有触发bfc之前：
<div style="width: 300px ; height:300px; background-color:blue">
<div style="width: 200px;height: 200px; background-color: yellow;">
<div style="width: 100px; height: 100px ;background-color:red ;margin-top:30px ;"></div>
</div>
</div>
在父级元素触发了bfc
- 设置了bfc 里面的元素在怎么折腾也不会影响到外边独立的个体
<div style="width: 300px ; height:300px; background-color:blue;">
<div style="width: 200px;height: 200px; background-color: yellow; overflow: hidden;">
<div style="width: 100px; height: 100px ;background-color:red ;margin-top:30px ;"></div>
</div>
</div>
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>
.box1{
width: 200px;
height: 200px;
background-color:red;
margin-bottom:50px;
/* 会取大的这个值 50+50 并没有叠加 */
/* margin-bottom:100px; */
}
.box2{
width: 200px;
height: 200px;
background-color:yellow;
margin-top: 50px;
}
.box{
overflow: hidden;
/*inline-block;横着排列 */
/* display: inline-block; */
/* display:flex; */
/* float: left; */
/* position: absolute; 层叠在一起 */
}
</style>
</head>
<body>
<!-- <div class="box1"></div>
<div class="box2"></div> -->
<!-- 不是給兩個div父级 加 -->
<!-- <div style="overflow: hidden;">
<div class="box1"></div>
<div class="box2"></div>
</div> -->
<!-- 而是分别成为一个整体 -->
<div class="box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></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>
.father{
width:200px;
background-color: red;
border: 1px solid green;
}
.son{
width: 100px;
height: 100px;
background-color: yellow;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
父级加上：
overflow: hidden;
/* display: inline-block; */
/* position: absolute; */
解决覆盖问题
这种就是两列布局 适合做后台管理系统
<!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>
.div1{
width: 250px;
height: 400px;
background-color: red;
float: left;
}
.div2{
height: 400px;
background-color: blue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">阿大撒大撒大撒啊啊啊啊啊啊啊啊啊啊啊啊 这个宽没有给会自适应屏幕</div>
</body>
</html>
