一、认识浮动

• float属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它
• 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
• float常用取值
  • none：不浮动，默认值
  • left：向左浮动
  • right：向右浮动

二、浮动的规则

• 浮动的规则一
  • 元素一旦浮动，脱离标准流
  • 定位元素会层叠在浮动元素上面
• 浮动规则二
  • 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块（一般是父元素）的左（右）边界
• 浮动规则三
  • 浮动元素之间不能层叠
  • 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素；如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
• 浮动规则四
  • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
• 浮动规则五
  • 行内级元素、inline-block元素浮动后，其顶部将与所在行顶部对齐

三、浮动的问题

• 高度塌陷
  • 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
  • 父元素计算高度时，就不会计算浮动子元素的高度，导致了高度塌陷
• 解决父元素高度塌陷问题的过程，一般叫做清浮动

四、清除浮动

1. 清浮动的目的

• 让父元素计算总高度的时候，把浮动子元素的高度算进去

2. clear属性

• 可以指定一个元素是否必须移动到在它之前的浮动元素下面
• 常用取值：
  • left：要求元素的顶部低于之前生成的所有左浮动元素的底部
  • right：要求元素的顶部低于之前生成的所有右浮动元素的底部
  • both：要求元素的顶部低于之前生成的所有浮动元素的底部
  • none：默认值，无特殊要求

3. 清除浮动的方法

• 方法一：
  • 给父元素增加固定高度（不推荐）
• 方法二：
  • 给父元素最后增加一个空的块级子元素，并且让它设置clear:both
• 方法三：
  • 伪元素清除浮动

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

五、布局方案对比