CSS 浮動 float 小結

時間 2021-04-05

標籤 css html html5 git github 瀏覽器佈局 spa 設計 code 欄目 CSS 简体版

原文原文鏈接

引子

在維護一些項目的時候，發現很多地方用 float 來進行佈局，知道這個屬性的做用效果，也知道怎麼解決相關的問題，但就是不能進一步說出一個因此然來，就整理一下了。css

約定

這裏是爲了理解 float 相關的問題和解決方法，不去比較它們的優劣和兼容性，要相信將來是愈來愈美好的。基本的 html 結構以下：html

<div class="float-parent">
  <div class="float-ele fl"></div>
</div>

如下所講示例頁面：CSS浮動float相關初解示例html5

手機端瀏覽git

浮動的用途

浮動設計的初衷，是爲了實現文本環繞效果。在一些教程裏面，關於浮動的介紹沒有強調這個，而是講如何利用這個屬性的做用，去實現一些所謂「有趣」的效果。雖然拓展了思路，但感受並無用的合適。github

浮動的介紹

W3C 文檔裏面說的很簡潔：這個屬性指定一個盒子浮動到左邊、右邊仍是不浮動。下面是摘取過來的基本特性。瀏覽器

Value: left | right | none | inherit
Initial: none
Applies to: all,but see 9.7
Inherited: no

下面就是相關說明和一些注意項。佈局

重要的認知

浮動使元素從正常的文檔流中移除，脫離了正常的文檔流。而後向左或者向右平移，一直移動直到碰到了所處的容器的邊界，或者碰到另一個浮動的元素。spa

值的做用

left ：元素會產生一個塊級盒子向左浮動，正常的文檔流會從這個盒子的右邊和頂部開始。
right ：跟 left 屬性值相似，只是元素產生的塊級盒子向右浮動，正常的文檔流會從這個盒子的左邊和頂部開始。
none ：這個盒子不浮動。

display, position 和 float 之間的關係

屢次看到有人把這些屬性寫在一塊兒，感受是在用試錯的心理寫 CSS 。如下狀況示例頁面：display、position 和 float 之間的關係示例。精力有限，規則應用下只試了部分取值狀況。設計

這三個屬性影響盒子產生和佈局，它們相互影響有如下的順序規則判斷：code

若是 display 的屬性值爲 none ，那麼 position 和 float 屬性不會應用。這種狀況不會產生盒子。
不然，若是 position 的指定值爲 absolute 或 fixed ，這個盒子會是絕對定位，float 的計算值會取 none ，display 的取值規則按照下面的表格所示。這個盒子的位置取決於 top ，right ，bottom ，left 屬性和這個盒子的包含塊。
不然，若是 float 指定了 none 以外的值，這個盒子就會浮動，而且 display 取值規則按照下面的表格所示。
不然，若是這個元素是根元素，display 取值規則按照下面的表格所示。但在CSS2.2 有一種狀況例外，指定爲 list-item 的值變成計算值爲 block 或 list-item 時，它的值未定義。
不然，剩下的 display 屬性值按照指定的值應用。

指定的值	計算值
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

由以上的規則可知，將這些屬性寫一塊兒，有些時候並不會起做用。對於不熟悉的人反而會形成沒必要要的困惑。

浮動的約束規則

約束的規則有很多，但實際中碰到的狀況，並無那麼多，以爲要關注瞭解的點有 3 個：

浮動元素的包含塊，是其最近的塊級父元素；
包含塊對於浮動元素的邊界是指內容區的邊界；
多個浮動元素之間的相互影響。

相關詳細介紹見這裏。若是以後實際中碰到相關狀況，需在此進行補充。

浮動的問題

這個就是衆所周知的父元素高度坍塌問題，因爲脫離了文檔流，這個是能夠想象到的。爲了解決這個問題，出現了 2 種說法：清除浮動和閉合浮動。看了這篇文章，以爲說的頗有道理，咱們是爲了解決高度坍塌的問題，清除浮動只是其中的一種方法，叫閉合浮動更爲合適嚴謹。

閉合浮動的方法

方法1：利用屬性 clear

樣式屬性 clear

結構變成以下

<div class="float-parent">
  <div class="float-ele fl"></div>
  <div class="clear-fix"></div>
</div>

新增的樣式爲：

.clear-fix {
  clear: both;
}

這個就是使用了 CSS 屬性 clear 的特性，這個屬性指出元素盒子的那邊不會跟更早浮動盒子相鄰，值爲 both 的含義是：

在源文檔裏面，若是有比該元素比較早的浮動元素，須要讓該元素的頂部 border 邊界在，任何右浮動或左浮動元素底部外（margin）邊界之下。

標籤屬性 clear

<div class="float-parent">
  <div class="float-ele fl"></div>
  <br clear="all" />
</div>

這個做用跟 CSS 形式同樣，標籤上的屬性 clear 在 html5 中已經被廢棄了，建議使用 CSS 屬性 clear 。

方法2：利用僞元素

/* 添加到父元素上 */
.close-float-method2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

這個就是用僞元素的方式替代額外的標籤，主要屬性仍是用到了 clear 。這個方法聽說在跨瀏覽器時有問題，裏面提到的是 ie7 ，就沒有去嘗試，具體見這裏。

方法3：利用屬性 overflow

/* 添加到父元素上 */
.close-float-method3 {
  overflow: hidden;
}

這個就要提到一個概念 Block formatting contexts（塊級格式化上下文）。

浮動、絕對定位元素和塊級包含塊（好比 inline-blocks、table-cells、table-captions）都不是塊級盒子，overflow 屬性值取 visible 以外值的塊級盒子爲它們的內容創建新的塊級格式化上下文。

在一個塊級格式化上下文中，垂直方向上，盒子的放置是一個接一個，從一個包含塊的頂部開始。垂直方向上兩個相鄰盒子的距離由 margin 屬性決定。垂直邊距在同一個塊級格式化上下文中會產生重疊。

在一個塊級格式化上下文中，每一個盒子的左外邊界跟包含塊的左邊界相接觸。這個對於浮動的展現一樣是適用的，除非這個盒子創建了一個新的塊級格式化上下文。

這裏使用了 overflow 後創建了塊級格式化上下文，包含了浮動元素，因此就閉合了浮動。

以上所講相關示例頁面：CSS浮動float相關初解示例

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。