浮动清除

为什么要清除浮动？如何清除浮动？ 我也是一脸懵逼，之前经常是百度，大致一看，复制粘贴，神不知鬼不觉就解决了，然后也没去深究。现在从头开始来看吧。

HTML代码结构

一般的CSS样式

效果

但有时候需要的这三个div并排显示，这时候就需要用到float

改动CSS代码，加个float：left 

效果：

好像效果是实现了，里面的div并排显示.但仔细看会发现，大的div框box塌陷了，高度变成2px。

想想，如果这个时候这个box下面还有一个box2,那这个box2就会挤上来，如下

HTML结构代码

为节约空间，这个box2的样式的就写了行内样式。直接看效果

 很明显这不是我们想要的样式，我们想要的是如下图的样式

也就是我们既想要box里面的div并排浮动显示，又想要box框不塌陷，这时候就需要用到清除浮动，已达到我们想要的效果。

接下来就是清除浮动的常用方式 

方式一：给父级元素添加height

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

优点：简单、代码少、容易理解掌握

缺点：只适用于高度固定的布局，要给出精确的高度，若浮动内容高度出现变化，就会有问题

建议：不建议使用，扩展性差，只建议在高度固定的布局时使用

方式二：结尾处加空的div标签，clear:both

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

优点：简单、代码少、兼容性好，浏览器都支持，不会出现怪异的问题

缺点：如页面浮动布局多，就会多了很多空标签，解析快慢暂且不说，代码可读性就变差不少

建议：不推荐使用，但此方式曾经有一段时间很火，很流行使用

方式三：父级div定义 伪类:after 和zoom(据说是目前最火、最高大上的方法)

/*== for IE6/7 Maxthon2 ==*/    
.box{ 
    border: 1px solid deepskyblue; 
    zoom: 1; 
}   
/*== for Firefox/Chorme/Opera/IE8 ==*/ 
.box:after{ 
    content: ""; 
    display: block; 
    clear: both;
    width: 0;
    height: 0;
    visibility: hidden;
} 

原理：利用:after在元素内部插入一个元素块，给该元素块添加clear:both，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于：clear:both在html插入一个明显的div.clear标签。而此处是利用其伪类：after，在元素内尾部增加个一个类似于div.clear的效果。

        其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 

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

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

建议：推荐使用，建议定义公共类，以减少CSS代码。 

方法四：父级div定义overflow：auto | scroll | hidden

原理：必须定义width或zoom:1，同时不能定义height，（使用Google测试不用也可以）

         使用overflow时，浏览器会自动检查浮动区域的高度 

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

缺点：内部宽高超过父级div时，会出现滚动条。 

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

方法五：父级div也一起浮动

原理：提升父元素的层级，跟着子元素一起浮动，变成一个整体

优点：没有优点

缺点：会产生新的浮动

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

方法六：父级定义display:table

原理：将div变成表格

优点：没有优点

缺点：会产生新的浮动

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

方法七：结尾处加 br标签 clear:both

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签 clear：both

建议：不建议使用，了解即可

方法八：inline-block清除浮动

缺点：左右margin自动失效

最后：但不是不重要，也不是不知道！ 

        下一标签直接清浮动兄弟标签浮动时，在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动。

结语：清除浮动的方式虽然是有很多种，但是不是每种都适合你，也不是每种都能很好的兼容所有浏览器，所以参照你觉得最好的方式去做，个人觉得方法三不错，不需多于的标签，而且也能很好的兼容。再次again：当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！