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

浮動的工做原理

浮動是讓某元素脫離文檔流，在浮動框以前和以後的非定位元素會當它不存在同樣，可能沿着它的另外一側垂直流動，但都爲其騰出空間，塊級元素也不例外（被浮動元素佔據了部分行空間的塊級元素，仍然被看做是佔據了一整行，只不過是被浮動元素佔據的那部分空間沒法利用罷了）。

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止；若是當前線上的水平空間不足，它將逐行向下移動，直到有空間爲止（因此浮動元素不會影響頁面上方佈局）。任何元素均可以浮動，浮動元素會生成一個塊級框（擁有塊級元素特性，但不佔整行），而不論它自己是何種元素。

另外由於浮動元素脫離了文檔流，全部它沒法爲其文檔流中的父級元素撐起高度。

清除浮動技巧

   一、clear清除浮動

left    在左側不容許浮動元素。

right在右側不容許浮動元素。

both在左右兩側均不容許浮動元素。

none默認值。容許浮動元素出如今兩側。

在 CSS1 和 CSS2 中，這是經過自動爲清除元素（即設置了 clear 屬性的元素）增長上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增長清除空間，而外邊距自己並不改變。不論哪種改變，最終結果都同樣。例如：若是聲明爲左邊清除，會使元素的上外邊框邊界恰好在左邊浮動元素的下外邊距邊界之下。

要注意了，咱們是經過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。浮動元素脫離了文檔流，就算爲其加了清除空間，也影響不了父元素的高度，最多能讓其某側不容許其餘浮動元素。

clear 只能做用與塊級元素或浮動元素，不過上面已經說了做用於浮動元素的弊端，因此通常都是使用塊級元素。

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

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

// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題

.clearfix:before,

.clearfix:after {

    display: table;

    content: " ";

}

.clearfix:after {

    clear: both;

}

.clearfix{

    *zoom: 1;

}

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

    二、BFC清除浮動

   BFC全稱是塊狀格式化上下文，它是按照塊級盒子佈局的。咱們瞭解他的特徵、觸發方式、常見使用場景這些就夠了。

BFC的主要特徵

BFC容器是一個隔離的容器，和其餘元素互不干擾；因此咱們能夠用觸發兩個元素的BFC來解決垂直邊距摺疊問題。

BFC能夠包含浮動；一般用來解決浮動父元素高度坍塌的問題。

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

那麼，怎樣才能觸發BFC呢？

BFC的觸發方式

咱們能夠給父元素添加如下屬性來觸發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:若是對你有幫助，就順手點個贊吧~