1.float

1> 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

2> 創(chuàng)建浮動(dòng)框可以使文本圍繞圖像。要想阻止行框圍繞浮動(dòng)框，需要對(duì)該框應(yīng)用clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動(dòng)框。

2.? 行內(nèi)元素在設(shè)置浮動(dòng)后可以設(shè)置高寬。

當(dāng)該屬性(display)不等于none引起對(duì)象浮動(dòng)時(shí)，對(duì)象將被視作塊對(duì)象(block-level)，即display屬性等于block。也就是說，浮動(dòng)對(duì)象的display特性將被忽略。float在絕對(duì)定位和display為none時(shí)不會(huì)被應(yīng)用。對(duì)應(yīng)的腳本特性為stylefloat（ie）或cssfloat（非ie）。(注意這里為stylefloat或cssfloat，而不是float)

因?yàn)橹挥袎K元素才會(huì)有物理屬性，在css世界里邊，有三種形態(tài)的東西，

1>.?塊元素?！√匦裕河形锢韺傩裕瑆idth,height寫值起作用，而且要占據(jù)一行。

2>.?內(nèi)聯(lián)元素。?特性：沒有物理屬性。但是margin，padding值有用。不占據(jù)一行，后邊可以有兄弟元素。

3>.?即是塊又是內(nèi)聯(lián)，根據(jù)兄弟兄弟元素決定。

為什么是float之后才會(huì)有物理屬性，這就是塊與內(nèi)聯(lián)元素相互轉(zhuǎn)化的問題。

塊元素?->?內(nèi)聯(lián)元素：　display:inline;

內(nèi)聯(lián)元素?->?塊元素：　display:block;

float就是隱性的把內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素，這是對(duì)內(nèi)部的特性就是有物理特性，但是他不占據(jù)一行。對(duì)外是內(nèi)聯(lián)元素的屬性。他有個(gè)壞處就是會(huì)影響兄弟元素。相當(dāng)于：display:inline-block;

那為什么不直接display:inline-block;因?yàn)檫@個(gè)在ie6下有幾個(gè)px的bug。

3. 塊級(jí)元素在float下的變化

一直以為float屬性不會(huì)對(duì)div的寬度或高度有什么影響.但是,float對(duì)div寬度的影響是顯著的.

1>首先div的默認(rèn)寬度是width:auto;意思是自動(dòng)調(diào)整寬度.

在不帶float的情況下,div的寬度會(huì)自動(dòng)調(diào)整至最大化,而在帶float的情況下則正好相反,它會(huì)自動(dòng)調(diào)整至最小化.

這個(gè)可能是為了clear而設(shè)定

2> 第二div的默認(rèn)高度也是height:auto.帶不帶float的div都一樣,都是自動(dòng)調(diào)整至最小化

3> 第三div帶float時(shí),只要寬度不超過網(wǎng)頁寬度,則其它元素包括div都要環(huán)繞它.或者也可以認(rèn)為此時(shí)的帶float的div是一個(gè)特殊的 padding

因此，左右分開的網(wǎng)頁,左側(cè)的寬度固定,右側(cè)的寬度隨分辨率自動(dòng)適應(yīng),并占滿右側(cè)的空間.

方法就是左側(cè)的div用float:left.而右側(cè)的div不帶float.這樣就可以實(shí)現(xiàn)這個(gè)效果了.

4. 清除浮動(dòng)

1> 父級(jí)div定義偽類：after和zoom

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題

優(yōu)點(diǎn)：瀏覽器支持好，不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）

缺點(diǎn)：代碼多，不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持

建議：推薦使用，建議定義公共類，以減少CSS代碼

2> 在結(jié)尾處添加空div標(biāo)簽clear:both

原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度

優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題

缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不爽

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動(dòng)方法

3> 父級(jí)div定義height

原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題

優(yōu)點(diǎn)：簡單，代碼少，容易掌握

缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題

建議：不推薦使用，只建議高度固定的布局時(shí)使用

4> 父級(jí)div定義overflow:hidden

原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度

優(yōu)點(diǎn)：簡單，代碼少，瀏覽器支持好

缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏

建議：只推薦沒有使用position或?qū)verflow:hidden理解比較深的朋友使用

補(bǔ)充：

為什么"overflow:hidden"能清除浮動(dòng)的影響。

我們經(jīng)常會(huì)在父元素里設(shè)置某個(gè)子元素浮動(dòng)。浮動(dòng)后，子元素脫離了文檔流，使得父元素?zé)o法包住這個(gè)浮動(dòng)的子元素。我們通常在父元素上設(shè)置一個(gè)clearfix的偽元素來清除浮動(dòng)；同樣，我們可以利用BFC可以包含浮動(dòng)這一特性來清除浮動(dòng)

作者：前端小少女

鏈接：http://www.itdecent.cn/p/7e04ed3f4bea

來源：簡書

簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。