CSS 浮動布局實例

實文章原名叫做 “碰到不支持 flex 的項目怎么辦？”

現在差不多已經是 flex 的天下了，簡單靈活，但有時還是不可避免地會接觸到 IE 瀏覽器，比如我最近接觸的閱文作家專區 (qq.com)[1]，這個就是需要兼容 IE9，也自然不能使用 flex 布局了。不能使用 flex 怎么辦（~~這個項目怎么這么XX，都 2021 年了還要兼容 IE~~）？那只能回歸傳統布局方式了，也就是浮動布局。

浮動 float 可以說是 CSS 布局里最為靈活的布局之一了，千萬不要小瞧了浮動，有些布局只有浮動才能實現呢。下面將介紹幾種常見的布局，一起看看吧

一、文本環繞布局

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

設置一個左浮動就可以了，實現如下

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

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

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

需要注意的是，浮動元素必須放在文本的前面（ HTML 結構），如果放在文本后面

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

那么就會變成這樣

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

不過，現在很少會見到這種環繞布局了，但有些時候這種思路還是挺有用的，比如在這篇文章 CSS 實現多行文本“展開收起” (juejin.cn)[3]，里面就用到了浮動的特性，實現了右下角文本環繞的效果，有興趣的可以看看

二、兩欄布局

兩欄布局的特點是左邊是固定尺寸，右邊自動撐滿剩余空間，例如

結構如下

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

浮動實現如下，主要是文本需要設置 overflow: hidden 。這里就不談實現原理（BFC）了，有興趣深究的可以查看這篇文章 CSS深入理解流體特性和BFC特性下多欄自適應布局[4]

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

如果右邊是固定尺寸，比如這樣的

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

.head{
  float: right;
}

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

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

完整代碼可訪問 float-2-cols[5]

三、三欄布局

三欄布局的特點是左右是固定尺寸，中間自動撐滿剩余空間，例如

結構如下

<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)[6]

四、文本省略跟隨布局

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

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)[7]

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

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

另外，如果多行文本就不適用了，可以用另一種方式實現，詳細原理可以查看這篇文章 CSS 實現多行文本“展開收起” (juejin.cn)[9]

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

五、其他擴展布局

這一部分相當于以上的擴展了，下面來看一個案例。

有時候標簽的后面會有日期，會一直位于最右邊，效果如下

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

因此需要再添加一層容器，實現如下

<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)[11]

六、總結和說明

上面介紹了浮動布局的幾個常用案例，相信能適用于絕大部分布局，當然并不是推薦大家一定要使用浮動布局，甚至有時候布局混亂（HTML結構與視覺不一致）、實現啰嗦（嵌套層級多）等情況，但是在不兼容 flex 布局的瀏覽器中還是挺有用的（低于IE10），甚至還有僅僅只能使用浮動才能實現的布局（文本環繞）。這里總結如下

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

隨著 IE 地逐漸退去，有些布局也會慢慢地淡出，就像早年的 table 布局一樣。但浮動布局一直在往新特性上發展，比如 Shapes 布局[12]就需要浮動做支持，另外，浮動布局也在慢慢支持邏輯屬性，比如 float: inline-start 。最后，CSS 最重要的是靈活性，多一種思路總是沒錯的。如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發???

References

[1] 閱文作家專區 (qq.com): https://write.qq.com/
[2] float-layout (codepen.io): https://codepen.io/xboxyan/pen/RwpqWvJ
[3] CSS 實現多行文本“展開收起” (juejin.cn): https://juejin.cn/post/6963904955262435336
[4] CSS深入理解流體特性和BFC特性下多欄自適應布局: https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
[5] float-2-cols: https://codepen.io/xboxyan/pen/WNpYQLB
[6] float-3-cols (codepen.io): https://codepen.io/xboxyan/pen/oNZQLWB
[7] float-auto-text (codepen.io): https://codepen.io/xboxyan/pen/poeQbYo
[8] 理解CSS3 max/min-content及fit-content等width值 : https://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/
[9] CSS 實現多行文本“展開收起” (juejin.cn): https://juejin.cn/post/6963904955262435336
[10] float-mul-tags (codepen.io): https://codepen.io/xboxyan/pen/PopWVNX
[11] float-auto-text-fixed (codepen.io): https://codepen.io/xboxyan/pen/WNpYJpN
[12] Shapes 布局: https://www.zhangxinxu.com/wordpress/2019/02/css-css3-shapes

. Float basics 浮動基礎

在了解浮動之前，要先了解文檔流。文檔流是正式輸出的流。元素在前面的元素先輸出。元素寫在后面的后輸出。塊級元素占滿一行。內聯元素按內容的大小占空間。且不占一行。文檔流有別于浮動流。根據w3school規定，由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。如下：

這個黃色的框在左浮動后，他下面的文字p元素就上來了。（為什么上來，因為p元素忽視浮動框的存在。P是文檔流。黃色框是浮動流。）這樣，他和黃色框是在同一行。文字照顧到框的存在所以向后縮進。其實<p>是也占一行的。但是它忽視黃色框的存在。按正常的文檔流輸出。Float以前主要是用于文字環繞圖片的效果。

注釋：所有元素屬性中有float或者position：abselute后這個元素輸出就是浮動流。怎么浮動看第2條。個人這么理解：浮動元素跟著浮動元素走。不考慮文檔流。

1. 什么是浮動？

浮動是指浮動一個元素。當你浮動一個元素后，他就會變成一個塊級元素。而且浮動時元素只能浮動到同一行的左邊或者右邊。

浮動的盒子脫離文檔流，然后飄到最左邊或者最后邊。（具體見下面的解釋！）

2. Where will a floated element move to? 浮動元素怎么浮動！

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

浮動的元素到達 body元素的邊框

或者其父元素的邊框或者到達另外一個浮動的邊框。

If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

譯文：如果對于浮動元素來講他所在的行沒有足夠的空間給他。他會移到下面的一行。下面的例子：黑盒子做float：left，黃色的做float：right。

3．當你浮動一個元素時，需要設置一個寬度。

4. 下面分析的是：一個元素在浮動元素的上面或者下面。

（重要的知識點：）★★★★★★★

第一：塊級元素在上，飄的元素在下。塊級元素不會受到影響。

第二：如果飄的元素在上，在他下面的元素講會受他的影響，包圍他。對于文字的話他會圍繞飄的元素。但是其他塊級元素，圖片會伸展到其地下去。這個我從dreamweaver中已經也看到了。

看圖：

如果你不想《p》元素上去了和黃色的框在同一行。可以用：清除浮動。

對p實行清除浮動。

處理這樣的問題，可以對塊級使用清除浮動。

規則如下：clear: left 、clear: right; clear:none;

如果你不想在浮動層下面的元素包圍浮動層，你可以用清除浮動。

總結：一般元素浮動后，會空出自己的所有行。左邊也好右邊也好。

然后其他元素就會包圍他。他需要清除自己的左邊或者右邊。就是表示他還是像以前那樣占那么多行。比如圖片占了那么多行。不讓其他元素包圍他。

要理解下面的現象：

上面的圖片是由這個排列出來的。

Div4 因為第一行排不下去了，所以要下來。他這里有一個過程：先排到div3后面，因為排不下去了，后來就又飛到了div1的下面。因為div1高度高，把他給卡住啦。就出現了這樣的情況。

基本概念：

Viewport是windows窗口的文檔可見部分。

Initial containing block：是對于頁面來講的。指頁面的總寬和長。

Containing box：指的是一個box。這個box帶有其他元素，比如p，ul等元素。

Normal flow：文檔的正常輸出，如果沒有float 或者position應用到這個元素。

在線咨詢

上一篇：15個好看的Bootstrap HTML網站模板下載
下一篇：前端開發之輸入框換行

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商