CSS 浮动学习笔记

什么是浮动？w3c给出这样的解释：

1. 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2. 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

（ps：在页面中独占一行，自上而下排列的元素，也就是传说中的流）

很显然，一个漂亮的页面不可能只是元素的排列堆砌，如何在一行显示多个元素，这就是浮动所需要做到的。

浮动的问题

可是，没有任何一个群体喜欢内部出现一个无法无天的人，页面也是这样的。浮动在给我们带来好处的同时，也有着显而易见的坏处：

1. 父元素的高度无法被撑开，影响与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后
3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

我们来举几个例子：
下图中，div2是浮动的，所以div3会自动向上移动，占据div2位置，重新组成一个流

然后，我们把div2和div3都设置成左浮动：

很明显的而看出，div2和div3不在属于普通流，所以div4上移。而div3则是跟在div2的后面。

如何清除浮动？

有的人就想，我就是又要马儿跑得快,又要马儿不吃草，虽说这是一句妄言，可在页面中，我们是有办法实现的：

1. 添加额外标签
   通过在浮动元素末尾添加一个空的标签例如
   

   
   或者

   优点：通俗易懂，容易掌握
   缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，

2. 父元素设置 overflow：hidden | auto属性
   通过给父元素添加overflow属性来使父元素扩展到float元素的高度，达到清除浮动的效果
   优点：不存在结构和语义化问题，代码量极少
   缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

3. 使用:after 伪元素
   （ps：after是伪元素（Pseudo-Element），不是伪类）
   网上关于after伪对象清浮动的分享很多，但大部分只是收藏别人的代码，至于为什么要这么写，少有人关注。

 .a:after{
        display:block;
        content:"";
        height:0;
        clear:both;
        overflow:hidden;
     }

以上其实就是after伪对象清浮动的核心语句了

• height:0; overflow:hidden; →是为了让内容不占地方，不打乱布局。

• content:""; →内是伪对象的内容，类似我们总习惯在清浮动的空标签内写个空格（貌似不写也没出过什么问题），引号内随意写内容或者不写也行。但这个属性一定要写上，否则清浮动无效！

• display:block; →是因为after伪对象默认是行内元素的，我们需要把它转成块元素。

• clear:both; →无论用什么方法清浮动，都是为了使这个命令起作用。