一、自适应两栏布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自适应两栏布局</title>
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
overflow:auto;
<!--当触发main生成BFC后(overflow值可为auto或者hidden，只要不是visible)这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度，自动变窄。-->
}
</style>
</head>
<body>
<div class="aside">1</div>
<div class="main">2</div>
</body>
</html>
二、清除内部浮动
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>清除内部浮动</title>
<style>
.par {
border: 5px solid red;
width: 300px;
overflow:auto;<!--因为内部浮动，就脱离了par，当没有加上这个条件时，par如果没有设置高度，就不会被撑开。为达到清除内部浮动，我们可以触发par生成BFC（overflow:auto或者hidden），那么par在计算高度时，par内部的浮动元素child也会参与计算。-->
}
.child {
border: 5px solid green;
width:100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
三、防止margin重叠
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>防止margin重叠</title>
<style>
p {
color:#000;
background:blue;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
.wrap{
overflow:auto;<!-- 原来两个p之间的距离为100px，即margin重叠，当我们在p外面包裹一层容器，并触发该容器生成一个BFC（overflow:auto;或者hidden）。那么两个P便不属于同一个BFC，就不会发生margin重叠了。-->
}
</style>
</head>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
</html>