关于浮动的知识总结_html/css_WEB-ITnose
块的特征
1、默认独占一行
2、没有宽度时，默认撑满一排（即父元素有多宽它就是多宽）
3、支持所有css命令
行内元素的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高（就是写上宽高值也并没有什么卵用~）
4、上下的margin和padding有问题（不支持上下的margin，对padding的上下设置并没有起到实际的作用。不会挤开上下的元素）
5、代码换行被解析为一个空格
inline-block的特点和问题
1、在一行显示
2、内联元素支持宽高
3、没有宽度时默认内容撑开宽度
4、标签之间的换行间隙被解析为空格（无论是块元素还是内联元素都会被解析）
5、IE6/7不支持块属性标签的inline-block
浮动的意思就是使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
加上float以后的元素有如下特征：1、块在一排显示；2、内联元素支持宽高；3、无论是块元素还是内联元素没有宽度时默认内容撑开宽度；4、脱离文档流；（所以要想法设法清浮动呀~~）5、提升层级半层
如何清浮动呢？
1.父级加height。但是 一般网页height值是依据子元素的height和得来的，所以扩展性不好，一般不采用。
2.给所有的父级都添加浮动。但会导致margin左右自动失效
3.给父级加display:inline-block。问题：margin左右auto失效
4.添加
空标签问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）在IE6下，高度小于19px的元素高度会被当作19px来处理~
5.添加
清浮动。但这个方法 不符合结构、样式、行为三者分离的要求
6.after伪类 清浮动方法（现在主流方法）
.clear:after{content:‘’;display:block;clear:both;} 必须是block才行
.clear{zoom:1;}
其中：
after伪类： 是在元素内部末尾添加内容；:after{content"添加的内容";} IE6，7下不兼容，但是在IE6、7下，浮动元素父级有宽度就不用清浮动！
zoom:1;是为了 触发 IE下 haslayout，使元素根据自身内容计算宽高。但是 FF 不支持
7.overflow:hidden 清浮动方法；
overflow有包着浮动元素的特点！但在IE6下不兼容，在IE6下包不住浮动元素，即在IE6下没有包元素的特点
问题：需要配合 宽度 或者 zoom:1 来兼容IE6；(如果该父元素有边框，这里写宽度就会给该父级设置相应的宽度，写zoom:1仅仅达到实现轻浮动的目的，边框会包住整个页面的width)