float浮动深入理解

【CSS深入理解之float浮动】听课总结

1.float的原本作用：为了实现文字环绕

2.float的包裹性和破坏性：

　　包裹性：收缩、坚挺、隔绝。BFC（Block Formatting Context），块级格式化上下文

　　破坏性：会让父元素高度塌陷（浮动的破坏性只是单纯的为了实现文字的环绕效果而已）

　　具有包裹性的其他小伙伴:dispaly:inline-block/table-cell... ;

position:absolute(亲近)/fixed/sticky

　　　　　　　　　　　　　 overflow:hidden/scroll

　　具有破坏性的其他小伙伴：display:none

　　　　　　　　　　　　　　position:absolute（亲近）/fixed/sticky

3.清除浮动（清除浮动带来的影响）

　　权衡后的策略：

　　.clearfix:after{content:""; display:block; height:0; overflow:hiddden; clear:both;}

　　.clearfix{*zoom:1;}

　　更好的方法：

　　.clearfix:after{content:""; display:table; height:0; clear:both;}

　　.clearfix{*zoom:1;}

　　!切勿滥用。clearfix应用在包含浮动子元素的父级元素上

4.浮动的量大特性

　　1>元素的block块状化（砖头化）

　　2>破坏性造成的紧密排列特性（去空格化）

　　（tip:换行符会产生空白间距；' ' 的本质是字符）

5.砌砖布局的问题

　　1>容错性比较高，容易出现问题（错位）

　　2>这种布局需要元素固定尺寸，很难重复使用

　　3>在低版本IE有很多问题

　　让IE7飙泪的浮动问题：

　　1>含clear的浮动元素包裹不正确的问题；

　　2>浮动元素倒数2个莫名垂直间距问题；

　　3>浮动元素最后一个字符重复问题；

　　4>浮动元素楼梯排列问题；

　　5>浮动元素和文本不在同一行的问题

6.浮动与流体布局

　　文字环绕衍生——单侧固定

　　左侧固定，右侧自适应的流体布局