2、设置浮动以后元素会向父元素的左侧或右侧移动，
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离， 将会无法撑起父元素的高度，导致父元素的高度丢失。
父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！
思想：在父元素的后面加内容，内容利用clear清除浮动元素带来的影响
首先第一个选择器是针对IE6和IE7的hack，也就是只有IE6和IE7可以识别，设置height的作用是触发具有clearfix类的html元素的haslayout属性，这样父元素可以自动涵盖浮动的子元素，达到清楚浮动的效果；第二个选择器用了:after伪类，IE6和IE7不支持，这是针对其他浏览器清楚浮动的样式，:after伪类就是在具有clearfix类的元素后面创建一个伪元素，这个content是指伪元素里面的内容，这里由于只是用来清楚浮动，里面填什么都可以，但这个属性一定要有，不然就会失效，display:block是将这个伪元素转换为块级元素，因为它默认是行内元素，clear:both当然是最核心的属性了，用来清楚浮动，height:0指示高度为零，和visibility:hidden隐藏都是为了不影响其他元素的布局，font:sans-serif这个写法有点错误，因为font声明必须要 至少 同时写两个值，一个值是标明字体大小，一个是标明字体类型，比如font:15px sana-serief当然font是所有的字体属性的简写形式，比如字体粗细等，具体有哪些你可以百度一下，在这里，这个申明对清楚浮动没影响。
任何元素 element 都可以被浮动。段落、div、list、tables,以及图像都可以被浮动，事实上即使是像 span 和 strong这样的行内置元素也可以很好地进行浮动。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
注意：
