一.清除浮动
什么是浮动？为什么要清除？浮动就是因为有元素使用了float属性，使得元素处于半脱离文档流的状态，无法撑开父元素。来看下面这个例子
<style type="text/css">
.div1{border: 2px solid red}
.left{float:left;width:20%;height:200px;background:#DDD}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
</div>
<body>
在这个例子中，我们希望它的效果应该是这样的，父级元素div1应当包含left元素。
但实际效果却是这样的
这就是浮动带来的影响，无法撑开父级元素，父级元素高度为0，这显然不是我们希望看到的，所以我们要清除浮动。清除浮动共有八种方式，下面来一一介绍，前五种我们可能会使用到，后三种只做了解就可以。
1.设置父级元素的高度
这是最简单容易理解的方式，但只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题，不推荐使用。
<style type="text/css">
.div1{border: 2px solid red；height:200px}
.left{float:left;width:20%;height:200px;background:#DDD}
</style>
2.结尾处加空标签clear：both,这种方法简单、代码少、浏览器支持好、不容易出现怪问题，但原理不好理解，而且如果页面浮动布局多，就要增加很多空div，让人感觉很不好，不推荐使用。关于css的clear属性大家如果不懂的话可以直接百度，both代表元素的左右都不允许出现浮动元素。
<style type="text/css">
.div1{border: 2px solid red}
.left{float:left;width:20%;height:200px;background:#DDD}
.clearfloat{clear:both}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="clearfloat"></div>
</div>
<body>
3.父级div定义 伪类:after 和 zoom，原理类似方法2，浏览器支持好、不容易出现怪问题，大部分的网站都在用，建议使用，但代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。其中的{zoom:1}是兼容IE6/7的写法，IE6/7通过zoom:1可以触发hasLayout。
<style type="text/css">
.div1{border: 2px solid red}
.left{float:left;width:20%;height:200px;background:#DDD}
.clearfloat:after{display:block;clear:both;content:"";display:hidden;height:0}
.clearfloat{zoom:1}
</style>
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
</div>
<body>
4，父级div定义 overflow:hidden，简单、代码少、浏览器支持好，不能和position配合使用，因为超出的尺寸的会被隐藏。只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。这个方法与第五个方法的原理都是触发了BFC，接下来我们会仔细讲解BFC。
<style type="text/css">
.div1{border: 2px solid red；overflow:hidden}
.left{float:left;width:20%;height:200px;background:#DDD}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
</div>
<body>
5.父级div定义 overflow:auto，简单、代码少、浏览器支持好，但内部宽高超过父级div时，会出现滚动条。不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
<style type="text/css">
.div1{border: 2px solid red；overflow:auto}
.left{float:left;width:20%;height:200px;background:#DDD}
</style>
<body>
<div class="div1">
<div class="left">Left</div>
</div>
<body>
6.父级div 也一起浮动，所有代码一起浮动，就变成了一个整体，但会产生新的浮动问题。
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
7.父级div定义 display:table，将div属性变成表格，但会产生新的未知问题。
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
8.结尾处加 br标签 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
二. BFC详解
在上面我们已经提到第四种和第五种方法都用到了BFC，那么什么是BFC呢？BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
1.触发BFC
只要元素满足下面任一条件即可触发 BFC 特性：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
2.BFC特性
- 同一个 BFC 下外边距会发生折叠
<style>
div{
width: 100px;
height: 100px;
background: blue;
margin: 100px;
}
</style>
<body>
<div></div>
<div></div>
</body>
如果我们不了解BFC的话，会认为两个div之间的距离为200px，但其实这两个div之间的距离只有100px，因为外边距发生了折叠，这是css的一种规范。
- BFC 可以包含浮动的元素（清除浮动）
这里所说的，就是上面方法四和方法五中的原理了，触发BFC后，容器将会包裹着浮动元素。在方法四五中使用了overflow属性，也就是我们上面所说的触发BFC条件中的第五条。
- BFC 可以阻止元素被浮动元素覆盖
来看下面这个例子：
<div style="height: 100px;width: 100px;float: left;background: blue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
在这个例子中左浮动的元素会将其他元素覆盖，但我们并不想其他元素被覆盖，这时就可以使用BFC，给第二个元素加上overflow：hidden，即可让第二个元素不再被浮动元素所覆盖。