2.1-清浮动

现象：

image.png

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}

方法

1. 添加新的元素 ，应用 clear：both；

在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="clear"></div>
</div>

.clear{
clear:both; 
height: 0; 
line-height: 0; 
font-size: 0}

2. 父级div定义 overflow: auto(BFC)

<div class="outer over-flow"> //这里添加了一个class
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <!--<div class="clear"></div>-->
</div>

.over-flow{
    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}

除overflow之外，父元素float也可以，但是影响布局，不推荐使用。

3. :after(类似于1,但不需要增加标签)

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
 .outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

4. 使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

总结

清除浮动的方法可以分成两类：
一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。

二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，关于这一点。