什么是浮动？w3c给出这样的解释：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
（ps：在页面中独占一行，自上而下排列的元素，也就是传说中的流）
很显然，一个漂亮的页面不可能只是元素的排列堆砌，如何在一行显示多个元素，这就是浮动所需要做到的。
浮动的问题
可是，没有任何一个群体喜欢内部出现一个无法无天的人，页面也是这样的。浮动在给我们带来好处的同时，也有着显而易见的坏处：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
我们来举几个例子：
下图中，div2是浮动的，所以div3会自动向上移动，占据div2位置，重新组成一个流
然后，我们把div2和div3都设置成左浮动：
很明显的而看出，div2和div3不在属于普通流，所以div4上移。而div3则是跟在div2的后面。
如何清除浮动？
有的人就想，我就是又要马儿跑得快,又要马儿不吃草，虽说这是一句妄言，可在页面中，我们是有办法实现的：
-
添加额外标签
通过在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div>
或者<br clear=“all | left | right | none” />
优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦， -
父元素设置 overflow：hidden | auto属性
通过给父元素添加overflow属性来使父元素扩展到float元素的高度，达到清除浮动的效果
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素； -
使用: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; →无论用什么方法清浮动，都是为了使这个命令起作用。
网友评论