CSS布局模型之浮動模型（浮動的工作原理和清除浮動技巧？）

浮動的工作原理

10年積累的成都網(wǎng)站制作、成都網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程，更有獲嘉免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

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

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止；如果當前線上的水平空間不足，它將逐行向下移動，直到有空間為止（所以浮動元素不會影響頁面上方布局）。任何元素都可以浮動，浮動元素會生成一個塊級框（擁有塊級元素特性，但不占整行），而不論它本身是何種元素。

另外因為浮動元素脫離了文檔流，所有它無法為其文檔流中的父級元素撐起高度。

清除浮動技巧

   1、clear清除浮動

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

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

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

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

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

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

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

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

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

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

.clearfix:before,

.clearfix:after {

    display: table;

    content: " ";

}

.clearfix:after {

    clear: both;

}

.clearfix{

    *zoom: 1;

}

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

    2、BFC清除浮動

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

BFC的主要特征

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

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

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

那么，怎樣才能觸發(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

 

參考文獻：http://www.jianshu.com/p/09bd5873bed4

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

     PS:如果對你有幫助，就順手點個贊吧~

新聞標題：CSS布局模型之浮動模型（浮動的工作原理和清除浮動技巧？）
瀏覽地址：http://bm7419.com/article6/psccig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、ChatGPT、微信小程序、App設計、網(wǎng)站收錄、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)