BFC简单总结
BFC简单总结
1、如何理解BFC
1、它相当于元素的一个属性，当设置某些样式之后就会开启这个属性
2、这个属性一旦被开启它就可以被看作文档中的不同元素，遵从普通流的页面布局
3、开启BFC后的盒子相当于一个封闭的空间，外部元素不受干扰
2、形成BFC的条件
1、浮动元素，float除了none以外的值
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
3、BFC的可以解决的问题
3.1、清除浮动和解决高度塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用BFC的方式清除浮动</title>
<style>
.outer {
border: 1px solid red;
overflow: hidden;
}
.inner {
float: left;
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
使用了overflow:hidden，于是开启了BFC
3.2、上下边距重合
上下边距重合的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC上下边距重合</title>
<style>
.top {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 100px;
}
.bottom {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
添加BFC后的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BFC上下边距重合</title>
<style>
.top {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 100px;
}
.bottom {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
.container {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="top"></div>
</div>
<div class="container">
<div class="bottom"></div>
</div>
</body>
</html>
