深刻解析 float

時間 2019-11-10

標籤深刻解析 float 欄目 CSS 简体版

原文原文鏈接

0.前言

float屬性在css2中是一個熱門的屬性，被普遍應用於佈局之中，同時因爲不當使用float帶來的問題也很是多，本文結合本身對float的理解以及實際項目中碰到float的相關問題，作一個詳細總結，歡迎一塊兒探討，但未經贊成禁止轉載。如下是文章的目錄css

float的特性html
float與absolute的區別bootstrap
float與inline-block框架
清除浮動的方法及優缺點dom

1. float的特性

文字環繞

float 最先的設計目的是用於圖片，使文字可以環繞在圖片周圍，像下面這樣：ide

文字環繞效果是很明顯的，這裏要注意一個地方:浮動的塊雖然脫離的正常的文檔流，可是還會佔有正常文檔流的文本空間，能夠看到上面第二種圖，p的區域實際上是頂到了img的底下的，由於float讓img脫離文檔流，可是p上的文字卻沒有頂過去，也就是說p上的一部分文字空間仍然被img佔據着，因此從這裏也能夠看出float的脫離文檔流不是徹底脫離。佈局

包裹性

所謂的包裹性是指，使用float的元素會自動加上一個塊級框，也就是能夠像塊級元素那樣設置寬高
，例子以下：ui

破壞性

float的破壞性主要是指它會使父容器的高度塌陷，也就是父元素在高度計算的時候會忽略浮動的元素，spa

能夠看到圖中名爲taxian的元素高度爲0。這個特性也正是它可以實現文字環繞的緣由，可是因爲後來float被大量應用到頁面佈局之中，因此這個咱們不得不想辦法清除浮動，這個在下文會有提到。設計

2. float和position:absolute

脫離文檔流

雖然在咱們經常看到描述float和absolute的時候，都陳偉脫離文檔流，可是實際上並不徹底相同：
在脫離文檔流方面，absolut正如它的名字通常，是絕對脫離，設置了該屬性的元素，將徹底獨立在文檔流以外，不會對其餘的元素產生任何影響，就舉上面文字環繞的例子來講，若是把img屬性的float換成position：absolue屬性的話，那麼p元素以及上面的文字都會頂到圖片的位置上，就像這樣:

而對於float咱們以前已經提出，float只是脫離了文檔流的dom空間可是還佔據着文字空間（這兩個名詞不知道是否已經有更標準的詞語出現，在這裏只是我的用法，見諒）

高度塌陷

float和absolute都能引發父元素的高度塌陷，一樣地，因爲absolute是徹底脫離文檔流，因此這種狀況的高度塌陷是沒辦法清除的；float引發的高度塌陷則是可清除的，咱們常說的清除浮動就是指清除float帶來的高度塌陷問題，在下文會有提到。

在兩列布局中的使用

float和absolute都被普遍用於兩列布局之中，absolute因爲徹底脫離，能夠作到精準的定位，可是不利於設計兩列之間的聯動變化；float屬性能夠保留一些相互影響，可是要很是當心傳遞來的問題，好比clear的不當使用會致使左右佈局異常聯動，在後面講清除浮動時會專門講解。並且在使用浮動佈局的時候，要注意某些狀況下要交換浮動左右浮動元素的聲明次序。

3. float和display:inline-block

橫向排列

首先，使用float和inline-block都能使li橫向排列。可是，使用float能夠選擇排列的方向,而inline只有一種方向；
第二是在單純排列圖片的時候，若是圖片大小不是徹底一致的，那麼使用這兩個屬性都能完成比較合適的排列：

可是若是圖片大小不等高，float的脫離文檔流特性致使排列的某些圖片會被擠到下一行，致使垂直方向沒法對齊，以下：

而若是使用display：inline-block則能夠保證垂直方向的對齊：

因此若是是要保證垂直對齊的狀況下，使用display:inline-block會比較合適

float和displayinline-block這兩個屬性有一個很常常用到的地方就是橫向導航。導航中通常是單行對齊，並且除了圖片以外還有文字，這時候若是採用display:inline-block，必需要考慮display:inline-block屬性帶來的空白間隙問題(這個問題能夠自行查找，本文中不贅述)，此時使用float:left更爲合適一些。

4.關於清除浮動

清除浮動的方式

前文中提到float屬性會引發父容器高度塌陷的問題，所以咱們須要清除浮動。

在閱讀這塊內容以前，請先了解css中的BFC(這個問題能夠自行查找，本文中不贅述)，在此基礎上，我認爲清除浮動，根據原理來劃分，分爲兩類：

利用clear屬性清除浮動
利用bfc原理包容浮動

首先介紹第一類，利用clear原理清除浮動，若是你們有過經驗都知道，一般利用clear屬性清除浮動的方式有兩種：

利用添加空標籤清除浮動
經過after僞類清除元素

這兩種方式只是寫法上有所不一樣，經過僞類清除可讓代碼比較簡潔，而且符合語義化的原則（其實就是能夠少寫無心義的空標籤）如今比較流行的bootstrap框架或者其餘各大框架中，一般使用一下代碼來清除：

.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}
.clearfix:after
{
  clear: both;
}
.clearfix{zoom:1;} //ie 6 7

其實這裏起清除浮動的做用的是隻是

.clearfix:after
    {
      content: " ";
      clear: both;
    }

至於before和after中的display:table;是爲了防止子元素垂直方向上的邊距摺疊，也就是一般說的子元素margin-top會被轉移到父元素的問題（爲防止篇幅過長這個問題也不在此解釋，若是有須要能夠私信回答）。

因此以上的效果就至關於在父元素最後插入一個子元素，而且設置clear:both屬性，這是如今最通用的辦法，可是其實並沒有是天衣無縫的

clear使用不當的例子

（這裏爲何用了大號呢，由於這個問題很重要！很重要！很重要！）

舉一個以前項目中碰到的一種狀況，爲了方便你們理解，在這裏把模型簡化,代碼以下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        *{
            padding: 0;
            margin:0;
        }
        .div1{
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightpink;
        }
        .div2{
            margin-left:100px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
        <div class="div1">
        這是div1
        </div>
        <div class="div2">
            <div style="float:left">這是一個浮動的標題</div>
            <div style="clear:both"></div>
        </div>
</body>
</html>

這段代碼是一個很是簡單的左右兩列布局，在右邊內部有個浮動的標題，因而在後面跟上一個清除浮動的子元素（這裏採用空標籤只是爲了在研究問題的時候排除僞類元素的干擾），可是存在一個問題：右邊的div2會自動適應div1的高度，或者說清除浮動的容器會有高度，咱們能夠在f12中直接改變左邊div1的高度，能夠看到右邊的高度也隨之改變。

這種狀況有不少方法能夠處理，好比讓div2造成一個bfc容器，可是不多看到有文章講到問題的根源，我查了好久，最後發現問題是源於clear這個屬性上設計：

clear:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

clear:both
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document

以上是w3c文檔上關於clear和clear:both的描述，大概有如下兩個重點：

clear清除浮動對於其餘造成bfc的塊內部的浮動元素是無效的
clear清除浮動的原理是：讓添加了clear屬性的那個元素的top邊緣在某側或者兩側（看設置的值是left right仍是both）浮動元素的底邊距之下。

其實這個很好理解，咱們之因此可以使用clear解決float引發的父元素塌陷問題，其實就是由於加了clear的空標籤或者是那麼僞類元素，把top值設置在了浮動元素的bottom邊緣下方，從而可以撐起父元素。

因此最後咱們就知道上面的問題出在哪裏了：clear是清除某側或者兩側的全部浮動，結合上面那個例子來看，實際上是有兩處浮動的，第一是左側的div1，第二是在div2內部有個浮動的標題，咱們的目的是要清除內部的浮動，可是由於clear自己的定義，就把兩個浮動都清除了，也就是把加了clear屬性的標籤top值設置了浮動元素的bottom邊緣下方，因此，那個塊將會和左側等高（實質應是設置了clear空標籤的高度爲0而且top恰好在div的下方）。