float:left;
浮动的作用：left/right/none
（1）使块元素在一行显示
（2）使内嵌元素支持宽高
（3）不设置宽度的时候宽度由内容撑开
（4）脱离文档流 （文档流是文档中可显示对象在排列时所占用的位置）
（5）提升元素层级半层。（一个元素的层级分元素本身和元素内容，元素内容在上面，元素本身在下面，就好比楼层一样，可以这样理解，元素内容就是写在元素里面的东西，例如文本图片等、元素本身就是元素的背景，边框之类组成的，浮动的作用就是将将元素的内容提升半层，提升到元素内容，所以例子里面的文本会被挤出来）
元素加了浮动以后，会脱离文档流，按照指定的方向去移动，直到碰到父级的边界或者另外一个浮动元素就会停止。
clear:left/right/none/both;
clear的作用就是元素的某个方向上不能有浮动元素
当父级没有设置高度，而子元素设置了高度且有浮动，这个时候子元素会脱离文档流，父级会包不住子元素。
解决方法：
（1）给浮动元素的父级也加浮动，这样子元素就会撑开父级高度，但是这样有个问题，加入父级也有父级，也要给父级的父级加浮动，这样比较麻烦
（2）给浮动元素的父级加display:inline-block;但是存在一个问题，如果父级元素有margin:0 auto；时，父级不会居中
（3）在浮动元素下加<div class="claer"></div> .claer{height:0;clear:both;font-size:0;}
（4）在浮动元素下加<br clear="all"/>(不符合w3c的规则,w3c要求结构、样式、行为三者分离)
（5）给浮动元素的父级增加 :after{content:"";dispaly:block;clear:both;} {zoom：1}，需要注意，IE6、7下不支持after伪类；在IE6、7下浮动元素的父级有宽度的话就不用清浮动（各大主流网站推荐的清浮动方法）
（6）给给浮动元素的父级增加overflow:hidden;或者overflow:auto;(),一定要配合room:1;
IE6下最小高度问题：IE6下高度小于19像素的元素，高度会被当做19像素处理
解决方法：增加font-size:0;(但是任然有点小问题)
（haslayout）根据元素内容大小或者父级的父级大小来重新计算元素宽高，影响haslayout的css属性有：
display:inline-block;
height:任何值（除了auto）
float:left或者right;
width:任何值（除了auto）;
zoom：除了normal外任何值；（zoom的作用就是放大或者缩小，为1时不变）
在IE6、7中只要设置了上面的任一属性，便会触发haslayout；
overflow 属性，当盒子的内容超出盒子的高度时，可以使用该属性：
overflow:auto;表示溢出显示滚动条；
overflow:scroll;表示默认显示滚动条；
overflow:hidden;表示溢出隐藏；
在IE6下，块属性有浮动和横向的margin，横向的margin会被放大成两倍；这种现象称为IE6下的块属性加浮动后的双边距bug，行内元素没有此问题；
解决方法，给块元素加dispaly:inline;
在IE6、7下，li本身没有浮动，但是里面的元素浮动了，li就会多出来几px间隙。
解决办法：
（1）给li加浮动，同事也要加宽度，但是该方法比较麻烦，会牵连一些问题；
（2）给li加vertical-align:top/middle/bottom;
vertical-align:top/middle/bottom表示垂直对其方式；
vertical-align还用来解决图片空隙；
在IIE6下高度小于19像素，高度会被当做19像素处理；
解决方法：
（1）给元素增加font-size:0；（但是该方法有局限性，当小于2px时，任然无法解决，会被默认为2px）
（2）给元素增加overflow:hidden;