先随便说几句
每次做页面的时候面对浮动真的是简直了，总是会出现要清除浮动的局面，如果说只是给“现代”浏览器做适配来清除浮动那还好，问题是天杀的最近在做的是学校系网啊。。。站群系统和学校一些电脑之老让我怀疑只适配ie9以上加webkit、Gecko是不行的。。
为什么要清除浮动？
只要百度一下清除浮动就会很多告诉你为什么要清除浮动，专业说法说是浮动会让元素脱离当前文档流喔。。反正我自己的理解是浮动能够让这一块东西从布上分离开来，原本的位置就空啦。举个栗子：
<div class="container">
<div class="div1 "></div>
<div class="div2 "></div>
<div class="div3 "></div>
</div>
上面那串玩意加上适当的样式，就会变成这个样子
蓝色是div1 绿色div2 红色是container。。div3？就是那一小块粉红色。。别以为div3就那么小。。实际上它是width=红色height=蓝色的神兽。之所以会如图所示是因为它跑到1，2下面去了。之所以会跑到下面去是因为蓝色向左浮动绿色向右浮动。。这样这两个小鬼原本占的空间就腾出来啦，大只粉就能上位啦。
这就是为啥要清除浮动啦。。
哦！对啦，所谓清除浮动其实是清除浮动对周遭环境的影响。。不能出现同个样式里有clear:both和float:left；虽然我试过。。。。
怎么清除浮动？
非常非常传统的就是写个clearfix样式。。。如下：
.clearfix {
clear:both;
写完之后再在你浮动的元素下面写个div然后给它这个元素。。
比如刚才那个栗子代码改成：
<div class="container">
<div class="div1 "></div>
<div class="div2 "></div>
<div class="clearfix"></div>
<div class="div3 "></div>
</div>
然后就噔噔噔噔！！！！！不上图了，反正是解决了。不过这种方法我不喜欢，不够优雅（逼格）分分钟要搞很多空的div！！
然后就有了神奇的::after啦~~这小子我就说明了，反正就是在用上它的元素（如.div1::after）结尾时做些什么用的。这样的话你给每个装有浮动元素的容器后面写上个
容器id/class/tag::after {
content: '';
height: 0;
display: block;
visibility: hidden;
clear: both;
}
你可以每个单个写。。我这种懒根子直接在我做的那个系网的css上面来个div,ul::after。。bootstrap好像是.container::after。
但是这种方法也是有bug的。。就是上面那个栗子，用了你也发现没用。。因为div3是跟div1和div2在同一个容器内的。。div1,div2自己本身的after是不会有用的。。那怎么办？要们用传统方法加个div什么的要么改成:
<div class="container">
<div class="little-container">
<div class="div1 "></div>
<div class="div2 "></div>
</div>
<div class="div3 "></div>
</div>
哦对了，这串东西是在div::after blablabla后才有用
然后还是噔噔噔。。其实就是div1,div2的after是没用的。。很好理解他们自己就是浮动元素了。。不能自己清除影响的。。靠别人要么就加div小弟去解决，要么就是给个容器它俩让容器老大解决。
其实我感觉啊。。要清除浮动最多的就是横向导航了，每个li小子都float:left了。这种只要给ul一个::after就好了，轮播图同理。
还有一种就是在页面主体部分会出现的左右浮动吧。。这种在切图分析的时候最好就是左右浮动的元素外面有个容器，要么就是这一行左右浮动的元素下面跟着的也是浮动元素，大家都浮动人人平等。
对了::after只在ie8+才()支持啊。。这就是为什么这次搞得我烦死了。。
后面想了想只能上老办法了。。而且老办法还不同一点。。请看
.clearfix {
zoom: 1;
clear: both;
height: 0;
}
ie7、6下测试过是有用滴(关于这个我遇到了很有趣的现象，一开始我故意不清除浮动，在ie6,7下会有Bug,可是后来再试多几次就没有啦OMG...什么原因还不清楚，等我搞出来了再说) ie8呢，我去翻w3c那里发现他的after是支持的但是我实际操作的时候发现还是不行。。也不知道为啥，一样，待我研究研究，我目前的解决方式是在浮动元素容器后追加
<!--[if lte IE 8]>
<div class="clearfix"></div>
<![endif]-->
万事大吉咯~~
最后再说两句
我写这些的原因呢，其实不在指导别人什么，我还不够格，更多是记录自己今天学到什么，也希望能得到别人的指点（不然我就只写自己博客就好啦）。我文笔不好写东西跟说话一样不经大脑想到什么就什么。。。我只是个在努力学习的大学狗而已。。有错别字提醒我。。。
