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 優勢

 　　　　一、元素的block塊狀化，元素的display屬性變爲block

　　　　 二、破壞性形成的緊密排列屬性(去空格化)

　　2 缺點

　　　　一、容錯性比糟糕，容易出現問題；

　　　　二、這種佈局須要元素固定尺寸，很難重複使用；

　　　　三、在低版本的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)