深入理解css之float

1.float的历史

float的设计的初衷：文字环绕效果

2.包裹与破坏

增强浮动的感性认知

包裹：1.收缩 2.坚挺 3.隔绝 里面的布局和外面一点关系都没有

包裹的特性就是BFC block formatting context-块级格式化上下文

具有包裹性的其他元素

display:inline-block/table-cell

position:absolute/fixed/sticky

破坏：容器被破坏，父级元素的高度坍塌

其他具有破坏性的元素

display:none

position:absolute(近亲)/fixed/sticky

3.浮动是魔鬼——无宽度、无图片、无浮动（新三无）

为何浮动要带来破坏——置之死地而后生

被误解的float

浮动具有破坏性，会让父元素高度塌陷

如何解决让父元素高度塌陷的bug？这个不是bug，而是标准 浮动的原本作用是仅仅是为了实现文字环绕效果

结论：浮动的破坏性知识单纯为了实现文字环绕效果而已，因此 父容器高度塌陷不是bug，特性使然。

4.清除浮动

清除浮动带来的影响

方法一，在脚底插入一个clear:both的元素

方法二，父元素BFC IE8+或haslayoutIE6、7

方法差异 clear,好像在桥梁，在两端搭建一个桥梁，有margin重叠等等特性

BFC像是一个封闭的通道，和外面是隔绝的，保护里面的任何声明不对外面有任何的影响。

clear通常应用形式，1.HTML block水平元素底部走起

2.CSS after伪元素底部走起

不足：第一种div元素-裸露的div元素看起来影响观瞻

第二种在IE6、7中兼容性问题。

BFC/haslayout通常声明

.float:left/right

.position:absolute/fixed

.overflow:hidden/scroll(IE7)

.dispaly:inline-block/table-cell(IE8+)

.width/height/zoome:1/...(IE6\7)

不足：无法“一方通行”，不可能所有元素都浮动，都绝对定位

你我相逢不相识zoom:1,兼容性很好，但是绝大多浏览器是不认识的。

权衡后的策略

.clearfix:after{

content:'';display:block;height:0;overflow:hidden;clar:both;

}

.clearfix{zoom:1;}

更好的方法

.clearfix:after{content:''; dispaly:table;clear:both;}

.clearfix{zoom:1;}

切勿滥用！clearfix 应用在包含浮动子元素的父级元素上。乱入的haslayout往往会让IE6、7做出出格的事情

浮动也会触发haslayout 所以，浮动在ie6\7下更显魔性

5.float的滥用——不在其职而谋其政

1.元素block块状化

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

6.float与流体布局

文字环绕衍生-单侧固定

width+float

padding-left/margin-left

DOM与显示位置匹配的单侧固定布局

width:100% + float

padding-left/margin-left

width+float+margin负值

智能自适应布局

float

display:table-cell IE+

display:inline-block IE7

float与兼容性

IE7的浮动问题

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

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

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

4.浮动元素楼梯排列问题

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

		合理使用浮动，且用且珍惜。。。--------