说一说css的浮动

1、先看下现象

所有元素float：left 

html代码 css代码

div.outer 没有设置高度；

不设置浮动的情况下，这个外层的高是会自动被撑开的。

但是当内层元素浮动后，就会：

（1）：背景不能显示 （2）：边框不能撑开 （当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。）（3）：margin 设置值不能正确显示

清除浮动：

①

②父级div（ div.outer）定义 overflow: auto

.flow{overflow: auto; zoom:1; //zoom:1; 是在处理兼容性问题}

③浮动元素的父亲 ，加上:after

原理：这种方法清除浮动就是利用:after和:before来在元素内部插入两个元素块，来达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。下面来看看其具体的使用方法：

其中clear:both;指清除所有浮动；content: '.';display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。