BFC是什么？如何清除BFC
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒
由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
清除BFC方法：
1、clear清除浮动（添加空div法）
<div style="clear: both;"></div>
- after伪类 清浮动
<style>
.clearfix:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_1{
width:50px;
height:50px;
float:left;
background:red;
}
.float_2{
width:50px;
height:50px;
float:left;
background:yellow;
}
.Next{
width:50px;
height:50px;
background:blue;
float:left;
}
</style>
<body>
<!--清除浮动-->
<div class="clearfix">
<div class="float_2"></div>
<div class="float_2"></div>
</div>
<!--已经清空浮动-->
<div class ="Next"></div>
</body>
CSS外边框塌陷问题
<style>
.div1{
width:100%;
height: 100px;
background-color: antiquewhite;
color: black;
margin-bottom: 50px; //！
}
.div2{
width:100%;
height: 100px;
background-color: aqua;
color: black;
margin-top: 50px; //！
}
</style>
<body>
<div class="div1">外边距塌陷</div>
<div class="div2">外边距塌陷</div>
</body>
解决办法：
1.利用绝对定位，分别给两个div加上absolute和relative;
2.给其中的一个div设置display：inline-block;
3.利用相对定位，给其中一个div设置position:relative ;
利用left，right，top，bottom设置偏移量（不能用margin）
4.浮动float
5.触发BFC,给任意一个div设置overflow:hidden;
6.内边距padding
相对定位和绝对定位
在使用偏移量（left，right，top，bottom）时会出现各种偏移问题
1.父相子绝
父元素用position: relative；
子元素用position: absolute；
2.如果直接用position: absolute，将会相对于body来计算偏移量。
5585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
