浮动
浮动的本质，就是实现文字环绕效果
浮动的表现形式
- 元素block化
- 破坏性造成的紧密排列特性(去空格化)
砌砖布局的问题
- 容错性比较糟糕，容易出问题
- 这种布局需要元素固定尺寸，很难重复使用
- 在低版本IE下会有很多问题
浮动与流体布局
- 文字环绕
float:left;
- 左右浮动，中间居中布局
左：float: left
右：float: right
中间：text-align: center
- 文字环绕衍生-单侧固定
固定元素：width+float;
右侧元素：padding-left/margin-left;
- DOM与显示位置匹配的单侧固定布局
左侧父元素：width：100% + float
左侧子元素：padding-left/margin-left
右侧固定元素：width + float + margin负值
- 智能自适应布局
左侧：float
右侧：display:table-cell(IE8+)
*display:inline-block(IE7)
Float与兼容性
让IE7飙泪的浮动问题
- 含clear的浮动元素包裹不正确的问题
IE7的表现
IE8+的表现
- 浮动元素倒数2哥莫名垂直间距问题
IE7的表现
IE8+的表现
- 浮动元素最后一个自负重复问题
IE7的表现
IE8+的表现
- 浮动元素楼梯排列问题
IE7的表现
IE8+的表现
- 浮动元素和文本不在同一行的问题
IE7的表现
IE8+的表现
