浮动布局
浮动是什么？
- 浮动是HTML元素存在的第二中状态
- 在这种状态下：
- 块：所有的元素都是块元素
- 浮：浮动的元素会脱离文档流（浮动元素后面的流动元素会占据浮动元素的原有位置）
- 动：浮动的元素会向左或向右无限运动，直到它碰到另一个元素。
- 并排：浮动元素会发生并排
- 混排：文字围绕图片排列
浮动属性
float：定义元素的浮动方式。
语法：
选择器{
float：none|left|right；
}
属性值：
- none：默认值，不浮动
- left：让元素向左浮动，
- right：让元素向右浮动
如何设置元素并排
第一步；确定子元素
第二步：确定父元素
第三步：给子元素添加float属性
第四步：给子元素设置合理宽度
第五步：清除浮动
高度塌陷
高度塌陷是指子元素浮动之后，父元素失去高度。后续元素上移，照成布局发生混乱
如何清除浮动
- BFC|haslayout
- 使用伪元素
- 使用空元素
clear属性
定义：清除元素两侧的浮动影响
语法：
footer{
clear：left|right|both|none
}
属性值：
- left：清除左侧浮动影响
- right：清除右侧浮动影响
- both：清除两侧浮动影响
- none：不清除
