认识浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它

float的常用取值：

• none：不浮动，默认值
• left：向左浮动
• right：向右浮动

浮动规则

1. 元素一旦浮动后, 脱离标准流

2. 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

3. 浮动元素之间不能层叠

4. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出

5. 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐

浮动的问题

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度,父元素计算总高度，就不会计算浮动子元素的高度，导致了高度坍塌的问题

解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面，可以利用这个特性来清除浮动

常用取值：

• left : 要求元素的顶部低于之前生成的所有左浮动元素的底部
• righ : 要求元素的顶部低于之前生成的所有右浮动元素的底部
• both : 要求元素的顶部低于之前生成的所有浮动元素的底部
• none ：默认值，无特殊要求

清除浮动的方法

1. 给父元素设置固定高度，扩展性不好（不推荐）
2. 在父元素最后增加一个空的块级子元素，并且让它设置clear: both，会增加很多无意义的空标签，维护麻烦，违反了结构与样式分离的原则（不推荐）
3. 给父元素添加一个伪元素

.clear_fix ::after{
  content:''
  display:block;
  clear: both;
  visibility: hidden;/* 浏览需兼容性.*/
  height: 0;/*浏觉器兼容性.*/
}
  
.clear-fix {
    *zoom: 1; /*IE6/7兼容性.*/
  }

布局方案总结