css：float之清浮动

上面一篇文章叙述了一些浮动的简单原理，这一篇来说说清浮动大法集合！
先来一段基础代码：
css样式：

.box{width:200px;border:2px solid black;}.inbox{width:100px;border:2px solid red;height:100px;float:left;}

body:

<div class='box'>   <div class='inbox'>   </div></div>

结果：

想象一下原因，结合上篇的浮动原理就能想象为什么撑不开父级的高度！
这里就需要引出清浮动了~~下面罗列一些清浮动的方法，以及各自的优缺点。

1.父元素也加浮动
给box也加上float：left；
结果：
父级元素就被撑开了。但是它的问题是如果父级有margin值，则会导致margin值失效~

2.父元素加上display：inline-block；
结果与上图一致，但是也会存在与上面一样的问题，margin无效

3.加一个清除浮动的子元素；
在box里面再加一个div：

<div class='box'>   <div class='inbox'>   </div>   <div class='inbox2'>   </div></div>

.inbox2{height:0;clear:both;background:blue}

标准浏览器下的效果：

IE6以下版本效果：

这里在ie6一下版本就有兼容性问题，因为ie6一下版本会有最小高度问题，最小大概是19px，所以就算给设成高度为0px，但是还是有19px的高度。
这里提出一个降低高度的方法就是在inbox2的css里面再加一句font-size：0px；但是高度不能完全消失，还有2px：
结果：

4.加一个< br clear=’all’>
加在inbox下面，这个没有发现什么兼容性问题

5.使用伪类；

.clear:after{content:'';display:block;clear:both}

该样式使用在父级div上。
在标准浏览器下结果：

低版本浏览器是不兼容伪类的所以使用after伪类，会不被识别！
这里再引出一点：在低版本浏览中，如果父级有宽度，则就算子元素浮动，父级的高度也会被撑开，如果父级没有宽度则高度不会被撑开，
原因是什么呢？这里又又要引出一点,haslayout!

---

haslayout
具体的文字性描述，可以去百度百科看看，不过估计也很难看懂~

低版本浏览器会有这个东西，（ie7以下）
触发了haslayout会出现这个结果：使元素根据内容大小或者父级大小来重新计算宽高！
那么怎样才会触发这个haslayout呢？以下属性的使用会触发：display：inline-block；height：除了auto以外；float：left或者right；width：除了auto以外；zoom：除了norml以外，等等等等（不一 一罗列了）

---

综合这个就可以找出低版本浏览器父级有宽度就不需要清浮动的原因了，是因为父级的宽度触发了haslayout，使得高度根据内容高度重新计算！

6.综上所诉，得出了终极清浮动法，也就是现在普遍使用的清浮动！

.clear{zoom:1}//低版本浏览器。父级未指定宽度的清浮动法.claer:after{content:'';display:block;clear:both}//标准下的清浮动！

.clear用在父级上！

到此清浮动大法就罗列完了，有没想到的请多多指教！O(∩_∩)O~~