说说自己对清除浮动的理解吧

先随便说几句

每次做页面的时候面对浮动真的是简直了,总是会出现要清除浮动的局面,如果说只是给“现代”浏览器做适配来清除浮动那还好,问题是天杀的最近在做的是学校系网啊。。。站群系统和学校一些电脑之老让我怀疑只适配ie9以上加webkit、Gecko是不行的。。


为什么要清除浮动?

只要百度一下清除浮动就会很多告诉你为什么要清除浮动,专业说法说是浮动会让元素脱离当前文档流喔。。反正我自己的理解是浮动能够让这一块东西从布上分离开来,原本的位置就空啦。举个栗子:

  

上面那串玩意加上适当的样式,就会变成这个样子

说说自己对清除浮动的理解吧_第1张图片

蓝色是div1 绿色div2 红色是container。。div3?就是那一小块粉红色。。别以为div3就那么小。。实际上它是width=红色height=蓝色的神兽。之所以会如图所示是因为它跑到1,2下面去了。之所以会跑到下面去是因为蓝色向左浮动绿色向右浮动。。这样这两个小鬼原本占的空间就腾出来啦,大只粉就能上位啦。
这就是为啥要清除浮动啦。。

哦!对啦,所谓清除浮动其实是清除浮动对周遭环境的影响。。不能出现同个样式里有clear:bothfloat:left;虽然我试过。。。。

怎么清除浮动?

非常非常传统的就是写个clearfix样式。。。如下:

.clearfix {
    clear:both;

写完之后再在你浮动的元素下面写个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::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是支持的但是我实际操作的时候发现还是不行。。也不知道为啥,一样,待我研究研究,我目前的解决方式是在浮动元素容器后追加

  

万事大吉咯~~

说说自己对清除浮动的理解吧_第2张图片

最后再说两句

我写这些的原因呢,其实不在指导别人什么,我还不够格,更多是记录自己今天学到什么,也希望能得到别人的指点(不然我就只写自己博客就好啦)。我文笔不好写东西跟说话一样不经大脑想到什么就什么。。。我只是个在努力学习的大学狗而已。。有错别字提醒我。。。

你可能感兴趣的:(说说自己对清除浮动的理解吧)