浮動(dòng)的工作原理

超過十多年行業(yè)經(jīng)驗(yàn)，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，重慶小程序開發(fā)，微信開發(fā)，重慶App定制開發(fā)，同時(shí)也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！

浮動(dòng)是讓某元素脫離文檔流，在浮動(dòng)框之前和之后的非定位元素會(huì)當(dāng)它不存在一樣，可能沿著它的另一側(cè)垂直流動(dòng)，但都為其騰出空間，塊級元素也不例外（被浮動(dòng)元素占據(jù)了部分行空間的塊級元素，仍然被看作是占據(jù)了一整行，只不過是被浮動(dòng)元素占據(jù)的那部分空間無法利用罷了）。

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹梗蝗绻?dāng)前線上的水平空間不足，它將逐行向下移動(dòng)，直到有空間為止（所以浮動(dòng)元素不會(huì)影響頁面上方布局）。任何元素都可以浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級框（擁有塊級元素特性，但不占整行），而不論它本身是何種元素。

另外因?yàn)楦?dòng)元素脫離了文檔流，所有它無法為其文檔流中的父級元素?fù)纹鸶叨取?/p>

清除浮動(dòng)技巧

  1、clear清除浮動(dòng)

left    在左側(cè)不允許浮動(dòng)元素。

right在右側(cè)不允許浮動(dòng)元素。

both在左右兩側(cè)均不允許浮動(dòng)元素。

none默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。

在 CSS1 和 CSS2 中，這是通過自動(dòng)為清除元素（即設(shè)置了 clear 屬性的元素）增加上外邊距實(shí)現(xiàn)的。在 CSS2.1 中，會(huì)在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結(jié)果都一樣。例如：如果聲明為左邊清除，會(huì)使元素的上外邊框邊界剛好在左邊浮動(dòng)元素的下外邊距邊界之下。

要注意了，我們是通過在別的元素上清除浮動(dòng)來實(shí)現(xiàn)撐開高度的， 而不是在浮動(dòng)元素上。浮動(dòng)元素脫離了文檔流，就算為其加了清除空間，也影響不了父元素的高度，最多能讓其某側(cè)不允許其他浮動(dòng)元素。

clear 只能作用與塊級元素或浮動(dòng)元素，不過上面已經(jīng)說了作用于浮動(dòng)元素的弊端，所以一般都是使用塊級元素。

全瀏覽器通用的clearfix方案，使用偽元素清除浮動(dòng)【推薦】

// 引入了zoom以支持IE6/7

// 同時(shí)加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問題

.clearfix:before,

.clearfix:after {

    display: table;

    content: " ";

}

.clearfix:after {

    clear: both;

}

.clearfix{

    *zoom: 1;

}

另外：也可以在父級元素中增加一個(gè)專門清除浮動(dòng)的塊級元素。（不推薦）

    2、BFC清除浮動(dòng)

  BFC全稱是塊狀格式化上下文，它是按照塊級盒子布局的。我們了解他的特征、觸發(fā)方式、常見使用場景這些就夠了。

BFC的主要特征

BFC容器是一個(gè)隔離的容器，和其他元素互不干擾；所以我們可以用觸發(fā)兩個(gè)元素的BFC來解決垂直邊距折疊問題。

BFC可以包含浮動(dòng)；通常用來解決浮動(dòng)父元素高度坍塌的問題。

其中，BFC清除浮動(dòng)就是用的“包含浮動(dòng)”這條特性。

那么，怎樣才能觸發(fā)BFC呢？

BFC的觸發(fā)方式

我們可以給父元素添加以下屬性來觸發(fā)BFC：

float 為 left | right

overflow 為 hidden | auto | scorll

display 為 table-cell | table-caption | inline-block | flex | inline-flex

position 為 absolute | fixed

參考文獻(xiàn)：http://www.jianshu.com/p/09bd5873bed4

   https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-float

   PS:如果對你有幫助，就順手點(diǎn)個(gè)贊吧~

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站題目：CSS布局模型之浮動(dòng)模型（浮動(dòng)的工作原理和清除浮動(dòng)技巧？）-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://weahome.cn/article/ijsij.html