浮动及清浮动的方式

浮动的特点：
1. 使块元素在同一行显示
2. 使内嵌支持宽高
3. 不设宽高则由内容撑开
4. 脱离文档流，按照指定的一个方向去移动，直到碰到父级的边界或者另外一个浮动元素停止
5. 提升层级半层，元素可以分为上下两层，下层是具有样式的元素本身，上层是元素里的内容，浮动只浮动了半层。所以另一个元素挤进来的时候，只能下半身挤了进入，上半身会被挤掉

文档流：文档中可显示对象在排列时所占用的位置

清浮动：
对于父级包含子级的情况，子级加了浮动之后会脱离文档流，导致父级包不住子级，所以有浮动必清浮动。下面是清浮动的几种方法。
1.父级也加浮动，这样不提倡，可能会导致整个页面上的元素都浮动。父级margin左右自动失效
2.给父级加display:inline-block,父级不会浮动，子级也会把父级撑开, 但是父级的margin左右自动失效
3.在浮动元素下加空元素

，并设置属性.clear{height:0px;font-size:0;clear:both;}
给父级加一个非浮动的子元素，让其排在浮动元素后面并clear:both(这样会被子元素挤掉下来)，设置子元素高度为0。但是会有兼容性问题，即IE6下最小高度问题，在IE6下高度小于19px的元素，高度会被当做19px来处理。解决方法是子元素加一个font-size:0px;不能完全解决，只能解决到最小2px
4.在浮动元素下加
br标签中的clear=”all”属性相当于clear:both属性，clear也有left和right的值，相当于clear:both;
不符合W3C标准，即结构、样式、行为相互分离的原则，浮动是由于子元素的一条样式引起的，而我们为了解决它而改了结构
5.after伪类
p:after{ content:”!!!!!!”;background: red;} content可以追加内容，并给且只给追加的内容加样式(即background: red;只加在追加的内容的后面)
设置一个属性，.clear:after{content:”“;display:block;clear:both;//设置成块属性，并清浮动}
然后浮动元素的父级元素class里再加上这个clear
但是IE6,7下只支持的四个伪类，不支持after
解决方法：给父级加一个.clear:after{zoom:1;//就是元素的比例，但是firefox下不支持} 触发IE6,7下父级元素的haslayout

**在IE6,7下的haslayout机制
haslayout是IE浏览器渲染引擎的一部分，默认为false不触发
//一旦触发，就会使元素根据元素内容的大小，或者父级的大小来重新计算元素的宽高
元素加了以下属性会触发haslayout
display：inline-block
height:(任何值除了auto)
float:(left或right)
width：(任何值除了auto)
zoom：(除normal外任意值)

6.给浮动元素的父级加overflow，IE6下不好用，所以要配合zoom:1
溢出overflow：auto溢出显示滚动条
scroll默认就显示滚动条
hidden 溢出隐藏
auto VS scroll ：scroll默认显示滚动条，不溢出也会显示滚动条，auto溢出显示，不溢出不显示滚动条