BFC(Block Formating Context)
这里是引用
Block Formatting Context 叫做“块级格式化上下文”。BFC的布局规则如下：
哪些元素会产生BFC。
1.根元素；(body就是根元素)
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible，如hidden
1.内部的盒子会在垂直方向，一个个地放置；
就是块级元素默认的排放方式咯
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上.下margin会发生重叠；
话不多说，上代码，让两个box属于不同BFC，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>
</head>
<body>
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
</body>
<style>
.wrap{
overflow: hidden;
}
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
overflow: hidden;
}
</style>
</html>
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
也是块级元素默认的排放方式咯
4.BFC的区域不会与float重叠；（直接上代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
<style>
div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
overflow: hidden;
}
</style>
</html>
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算
解决子元素浮动引起的高度塌陷的问题！！！
父子元素都必须为BFC元素
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style>
.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}
.parent {
border:1px solid black;
width:300px;
overflow: hidden;
}
</style>
</html>
版权声明：本文为simple5960原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。