那些年咱们一块儿清除过的浮动

 什么是浮动？

原理： 在css中使用float:left和float:right,使元素脱离文档流。同时显示为相似display:inline-block的形式（能够定义宽高，可是又不会换行）。最大好处是相比于以前的table布局的，更具备灵活性。

 不清除浮动会产生什么后果？

 好比 我想要以下这样的布局效果:

 

　HTML代码能够以下写：

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>

 CSS代码以下：

.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;display:inline;margin-left:12px;height:40px;background:#DDD}

可是因为有浮动产生，咱们没有清除浮动，因此会产生以下后果：以下图所示：

 也就是说 没有清除浮动 会使咱们的布局变乱。

 清除浮动的方法有哪些？

 1.父级元素定高度。

  仍是上面的HTML代码：

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>

CSS代码以下：

.div1{background:#000080;border:1px solid red;height:40px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;display:inline;margin-left:12px;height:40px;background:#DDD}

原理：父级div手动定义height，就解决了父级div没法自动获取到高度的问题。

优势：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，若是高度和父级div不同时，会产生问题.

建议：不推荐使用，只建议高度固定的布局时使用

2.添加额外的标签。

 HTML代码以下：

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

CSS代码以下：

.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

.clearfloat{clear:both}

原理：添加一个空div，利用css提升的clear:both清除浮动，让父级div能自动获取到高度

优势：简单，代码少，浏览器支持好，不容易出现怪问题

缺点：很多初学者不理解原理；若是页面浮动布局多，就要增长不少空div，代码语义化变差。

建议：不推荐使用，但此方法是之前主要使用的一种清除浮动方法

 3.父元素设置overflow:hidden

  经过设置父元素overflow值设置为hidden；在IE6中还须要触发 hasLayout ，例如 zoom：1；

　Zoom的使用方法：

　zoom : normal | number normal :　

　　默认值。使用对象的实际尺寸 number :　

　　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时至关于此属性的 normal 值 用白话讲解就是zoom:后面的数字即放大的倍数，能够是数值，也能够是百分比。如：zoom:1，zoom:120%。 而这个属性只要在IE中才起做用，因此不多用到它的实际用途，而最常常用到做用是清除浮动等。

 HTML代码以下：

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>

CSS能够写成以下代码：

.div1{background:#000080;border:1px solid red;overflow:hidden;_zoom:1}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

优势：不存在结构和语义化问题，代码量极少。
缺点：内容增多时候容易形成不会自动换行致使内容被隐藏掉，没法显示须要溢出的元素；

4.父元素设置 overflow：auto 属性

 一样IE6须要触发hasLayout，演示和3差很少
  优势：不存在结构和语义化问题，代码量极少
  缺点：多个嵌套后，firefox某些状况会形成内容全选；IE中 mouseover 形成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无端产生focus等。

5. 父元素也设置浮动。

HTML代码以下：

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>

CSS代码以下：

.div1{background:#000080;border:1px solid red;width:100%;float:left}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

优势：不存在结构和语义化问题，代码量极少。
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用。

6.父元素设置display:table

HTML代码以下：

<div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>

CSS代码以下：

.div1{background:#000080;border:1px solid red;width:100%;display:table;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:40px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:40px;background:#DDD}

原理：将div属性变成表格

优势：结构语义化彻底正确，代码量极少

缺点：盒模型属性已经改变，由此形成的一系列问题，不推荐使用。

建议：不推荐使用，只做了解。

 

7.使用:after 伪元素

HTML代码以下：

<div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div>
<div class="div2">div2</div>

CSS代码以下：

.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:left;width:30%;margin-left:12px;display:inline;height:80px;background:#DDD}
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}

因为IE6-7不支持:after，使用 zoom:1触发 hasLayout。

优势：结构和语义化彻底正确
缺点：复用方式不当会形成代码量增长。

 总之：都有优势和缺点 具体的状况具体分析。我目前通常都用overflow:hidden来解决浮动 到目前为止尚未碰到什么问题。