css-absolute relative float 之 float

重要知识点:

1 设计初衷

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

2 包裹与破坏

　　1 收缩：水平方向使其宽度收缩

　　2 坚挺：竖直方向

　　3 隔绝：里面的东西发生的任何事情对外面没有任何影响（ BFC（Block formatting context）块级格式化上下文 ）

　　4 具有包裹性的其他小伙伴：

　　　　1. display: inline-block/table-cell/...

　　　　2. position: absolute（近亲）/fixed/sticky

　　　　3. overflow: hidden/scroll

　　5 破坏（父级元素高度被破坏，高度塌陷）（浮动是魔鬼）

　　6 下面的属性也有破坏性

　　　　1. display: none

　　　　2. position: absolute（近亲）/fixed/sticky

3 清除float的影响

　　1.父元素底部插入clear：both；依然可以对外部产生影响

　　　　　　clear会发生margin重叠显现

　　2.父元素BFC（IE8+）或 haslayout（IE6/IE7）；隔绝外部，不会对外部产生任何影响

　　　　BFC/haslayout通常声明

　　　　float:left/right

　　　　position:absolute/fixed

　　　　overflow:hidden/scroll(IE7+)

　　　　display:inline-block/table-cell(IE8+)

　　　　width/height/zoom:1/...(IE6/IE7)

　　3.最佳实践

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

　　　　 .clearfix{*zoom:1;}

4 float的滥用

　　1 优点

 　　　　1、元素的block块状化，元素的display属性变为block

　　　　 2、破坏性造成的紧密排列属性(去空格化)

　　2 缺点

　　　　1、容错性比糟糕，容易出现问题；

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

　　　　3、在低版本的IE下会有许多问题。

5 流体布局

 　　1 两边按钮，中间标题效果

　　　　float:left(左按钮);float:right（右按钮）;text-align:center(中间标题)

　　2 单侧固定-文字环绕衍生

　　　　1 单侧

　　　　　　width+float(左侧元素)

　　　　　　padding-left/margin-left(右侧元素)　　
　　　　2 两侧自适应布局实现：(左侧浮动，右侧可以变更宽)

　　　　　　float:left;
　　　　　　width:max-width(自定义); display:table-cell(ie8,根据剩余宽度进行自适应浮动); *width:auto; *display:inline-block(ie7);

　　　　　　备注：IE6识别*和_；IE7识别*和!important；其他浏览器识别 !important。
　　　　3 左浮动，不改变DOM位置的流体布局写法，核心代码是
　　　　　　左侧div: width: 100%; float: left; 
　　　　　　右侧div: width: 56px; float: left; margin-left: -56px; <--- 此处的 margin-left，等于右侧 div 自身的宽度 width: 56px

6 兼容性

IE6浮动bug

　　1.float双倍边距bug

　　2.跟随float元素3px bug

　　3.float元素后面的斜体文字会有下沉的bug

IE7浮动bug

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

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

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

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

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

 

BFC/haslayout通常声明
float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)
width/height/zoom:1/...(IE6/IE7)