浮动float

文档流

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

浮动的定义

使元素脱离文档流，按照指定的方向发生移动，遇到父级边界或者相邻的浮动元素停下来

float特征

• 块级元素在一排显示
• 内联元素支持宽高
• 默认内容撑开宽度
• 脱离文档流
• 提升半个层级

clear清除浮动

元素的某个方向上不能有浮动元素

clear left/right/both/none/inherit

清除浮动的方法

1.给父级加高度

问题是扩展性不好

2.给父级加浮动

问题是页面中所有元素可能都要加浮动，margin左右自动失效

3.给父级设置 display：inline-block

问题是 margin左右auto失效

4.空标签清浮动

在浮动元素旁边新建空标签并给其添加样式clear：both；达到给浮动元素清除浮动的效果。
问题是IE6最小高度19px;解决后还有2px的偏差，而且设置空标签不符合标准，不建议使用

5.<br>清浮动

在浮动元素下面加<br clear="all"/>
问题是不符合工作中结构、样式、行为三者分离的要求

6.overflow清除浮动

给浮动元素的父级添加overflow：hidden；

overflow:hidden;溢出隐藏
overflow:scroll;以滚动条形式出现

7.建议使用：after伪类清除浮动

伪类：元素内部末尾添加的内容。
设置zoom,并将after内的content设为空。
伪类清除浮动，例如:

            .clearfix{ *zoom:1; }
              
            .clearfix:after{   
            content:"";    
            display:block;   
            clear:both;    
            }