浮动与清除浮动

具体内容：

一、浮动与清除浮动是html布局中很重要的一个部分，使用十分的普遍，要彻底掌握，搞清楚内部的原理。清除浮动是每个 web前台设计师必须掌握的技能。

二、浮动会使当前标签产生向上浮的效果，同时会影响到先后标签、父级标签的位置及width和height 属性。

三、并且一样的代码，在各类浏览器中显示效果也有可能不相同，这样让清除浮动更难了。

四、解决浮动引发的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 以下具体问题具体分析。

五、浮动是因为使用了float属性以后，元素脱离了正常的bfc模式下的正常位置，会形成wrap塌陷，因此要清除浮动，保持父元素块与其周围的布局稳定。

具体方法：

一、结尾处加空div标签 clear:both;最直观的方法。

<style type="text/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:right;width:30%;height:80px;background:#DDD} 
    /*清除浮动代码*/ 
    .clearfloat{clear:left;} /*或者写clear:both;最终起做用的也是清除左侧的浮动*/
</style> 

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

原理：添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度，包裹内部的子元素，也就是让子元素撑开父元素。

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

缺点：若是页面浮动布局多，就要增长不少空div，让人感受很很差。增长了没有意义的div，不利于页面优化操做。

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

二、父级div定义 伪类:after 和 父元素添加属性：zoom:1; 

<style type="text/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:right;width:30%;height:80px;background:#DDD} 
　　/*清除浮动代码*/ 
　　.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
　　.clearfloat{zoom:1} /*父元素要添加zoom:1;这句主要是为了兼容IE6和IE7，hasLayout()*/
</style> 

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

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点相似，zoom(IE专有属性)可解决ie6,ie7浮动问题。添加这个属性就是为了兼容IE6，IE7。

优势：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）。

缺点：代码多、很多初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 

建议：推荐使用，建议定义公共类，以减小CSS代码。 就像上面同样，定义好样式，使用的时候直接添加clearfloat类。

三、父级div定义 overflow:hidden; 或者设置overflow的值为auto;可是最好保证设置的父元素宽度大于子元素宽度的和，否则就会出现滚动条。若是不用兼容ie8如下就能够不设置width||zoom;auto属性值不建议使用。

<style type="text/css"> 
    /*这里说明定义width或者zoom是为了兼容ie8一下浏览器。*/
    /*zoom:1会触发ie（ie8如下）的haslayout，恰好能清理浮动。*/
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow: hidden;} /*定义宽度width||添加zoom:1;在高版本ie或者其余浏览器不用添加。*/
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;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> 

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

优势：简单、代码少、浏览器支持好。

缺点：不能和position配合使用，由于超出的尺寸的会被隐藏overflow:hidden;。 

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

四、父级div 也一块儿浮动 ，父元素上添加属性float:left||right;

这个方法会让父元素也浮动，总体一块儿浮动就仍是一个总体了，可是会产生新的浮动问题，因此这种方法不可取。

五、父级div定义 display:table;

<style type="text/css"> 
    .div1{background:#000080;border:1px solid red;margin-bottom:10px;/*解决代码*/width:98%;display:table;} 
    .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> 

原理：将div属性变成表格 

优势：没有优势 

缺点：会产生新的未知问题。 

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

六、父级div定义 height;

<style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
    .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>

原理：父级div手动定义height，就解决了父级div没法自动获取到高度的问题。
这其实并无解决浮动的问题，只是肯定了父元素的高，下边的元素接触不到浮动的元素了，也就看着像是清除了浮动。 

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

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

建议：不推荐使用，只建议高度固定的布局时使用。在高度肯定的时候可使用，高度自适应的话就算了吧，在无线端页面能够，可使用rem来相对于屏幕宽度自适应，可是终究也是高度固定。