CSS 彈性浮動佈局應用

其實文章原名叫作 「碰到不支持 flex 的項目怎麼辦？」

如今差很少已是 flex 的天下了，簡單靈活，但有時仍是不可避免的會接觸到 IE 瀏覽器，好比我最近接觸的 閱文做家專區 (qq.com)，這個就是須要兼容 IE9， 也天然不能使用 flex 佈局了。不能使用 flex 怎麼辦（這個項目怎麼這麼XX，都 2021 年了還要兼容 IE）？那隻能迴歸傳統佈局方式了，也就是浮動佈局。

浮動 float 能夠說是 CSS 佈局裏最爲靈活的佈局之一了，千萬不要小瞧了浮動，有些佈局只有浮動才能實現呢。下面將介紹幾種常見的佈局，一塊兒看看吧

1、文本環繞佈局

這類佈局應該就是浮動最初的用意了，好比這樣的

設置一個左浮動就能夠了，實現以下

<div>
  <strong class="float">浮</strong>
  <p>動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。</p>
</div>

.float{
  float: left;
  /*其餘樣式*/
}

完整代碼可訪問 float-layout (codepen.io)

須要注意的是，浮動元素必須放在文本的前面（ HTML 結構），若是放在文本後面

<div>
  <p>動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。</p>
  <strong class="float">浮</strong>
</div>

那麼就會變成這樣

也就是說，浮動的影響範圍是由浮動元素在 HTML 中的結構決定的，這一點很是重要

不過，如今不多會見到這種環繞佈局了，但有些時候這種思路仍是挺有用的，好比在這篇文章 CSS 實現多行文本「展開收起」 (juejin.cn)，裏面就用到了浮動的特性，實現了右下角文本環繞的效果，有興趣的能夠看看

2、兩欄佈局

兩欄佈局的特色是左邊是固定尺寸，右邊自動撐滿剩餘空間，例如

結構以下

<div class="crad">
  <img class="head" src="xxx.jpg">
  <p class="info">浮動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。</p>
</div>

浮動實現以下，主要是文本須要設置 overflow: hidden 。這裏就不談實現原理（BFC）了，有興趣深究的能夠查看這篇文章 CSS深刻理解流體特性和BFC特性下多欄自適應佈局

.head{
  float: left;
}
.info{
  overflow: hidden;
}

若是右邊是固定尺寸，好比這樣的

這種狀況如何處理呢？不少人可能會想到右浮動，沒錯，可是要注意，HTML 結構不須要改動，也就是浮動元素仍然在文本的前面

.head{
  float: right;
}

值得注意的是，若是須要設置兩欄的間距 margin，須要設置在浮動元素上

.head{
  float: left;
  margin-right: 8px;
}

完整代碼可訪問 float-2-cols

3、三欄佈局

三欄佈局的特色是左右是固定尺寸，中間自動撐滿剩餘空間，例如

結構以下

<div>
  <img class="head" src="xxx.jpg">
  <div class="right">編輯</div><!--注意是在文本的前面-->
  <p class="info">浮動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。</p>
</div>

注意，這裏位於右側的按鈕在 HTML 結構中仍然是在文本的前方，只須要設置右浮動就好了

.head{
  float: left;
}
.info{
  overflow: hidden;
}
.right{
  float: right;
  margin-left: 8px;
  /*其餘樣式*/
}

完整代碼可訪問 float-3-cols (codepen.io)

4、文本省略跟隨佈局

還有一類比較常見可是有些棘手的佈局，是這樣的

1. 當文本比較多時，超出隱藏，標籤文本在最右邊
2. 當文本比較少時，標籤文本跟隨文本

示意以下

這裏如何使用浮動實現呢？仔細觀察，其實就是一個兩欄佈局

<div class="card">
    <div class="right">編輯</div>
  <p class="info">浮動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素。</p>
</div>

.info{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

很明顯如今標籤文本一直位於右邊，那如何實現標籤文本跟隨的效果呢？其實能夠嵌套一個最大寬度爲 100% 的容器

<div class="card">
  <div class="wrap"> <!--添加一個最大寬度爲100%的容器-->
        <div class="right">標籤</div>
        <p class="info">浮動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素。</p>
  </div>
</div>

.wrap{
  display: inline-block;
  max-width: 100%;
}

完整代碼可訪問 float-auto-text (codepen.io)

若是不考慮兼容的話，width: fit-content 會是更好的選擇，可使容器保持 block 的特性，而且寬度由文本內容決定，詳細能夠參考這篇文章： 理解CSS3 max/min-content及fit-content等width值

.wrap{
  /*display: inline-block;*/
  max-width: 100%;
  width: fit-content;
}

另外，若是多行文本就不適用了，能夠用另外一種方式實現，詳細原理能夠查看這篇文章 CSS 實現多行文本「展開收起」 (juejin.cn)

完整代碼可訪問float-mul-tags (codepen.io)

5、其餘擴展布局

這一部分至關於以上的擴展了，下面來看一個案例。

有時候標籤的後面會有日期，會一直位於最右邊，效果以下

有人可能會想到絕對定位，可是這裏的日期可能不是固定的，須要自適應寬度，那如何實現呢？其實就是就是兩種佈局的結合

所以須要再添加一層容器，實現以下

<div class="card">
    <span class="date">6-14</span>
    <div class="outer-wrap"> <!--新加一層容器-->
        <div class="wrap">
            <div class="right">
                <button class="btn">標籤</button>
            </div>
            <p class="info">浮動屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動(文檔流)中移除，儘管仍然保持部分的流動性。一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素。</p>
    </div>
  </div>
</div>

下面就是兩欄佈局的寫法

.date{
  float: right;
}
.outer-wrap{
  overflow: hidden;
}

提示：若是採用 fit-content 方式，能夠省去 .outer-wrap 這一層容器

實時效果以下

完整代碼可訪問 float-auto-text-fixed (codepen.io)

6、總結和說明

上面介紹了浮動佈局的幾個經常使用案例，相信能適用於絕大部分佈局，固然並非推薦你們必定要使用浮動佈局，甚至有時候佈局混亂（HTML結構與視覺不一致）、實現囉嗦（嵌套層級多）等狀況，可是在不兼容 flex 佈局的瀏覽器中仍是挺有用的（低於IE10），甚至還有僅僅只能使用浮動才能實現的佈局（文本環繞）。這裏總結以下

1. 經過 BFC 實現自適應彈性佈局，float + overflow
2. 浮動的影響範圍是由浮動元素在 HTML 中的結構決定的
3. 經過設置最大寬度實現文本跟隨效果（fit-content也能夠）
4. 其餘佈局可相互組合實現
5. 另外這些 float 實現方式全兼容（IE6+），能夠放心使用

隨着 IE 的逐漸退去，有些佈局也會慢慢的淡出，就像早年的 table 佈局同樣。但浮動佈局一直在往新特性上發展，好比 Shapes 佈局就須要浮動作支持，另外，浮動佈局也在慢慢支持邏輯屬性，好比 float: inline-start 。最後，CSS 最重要的是靈活性，多一種思路老是沒錯的。若是以爲還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤