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

準流的默認特性
1、分行、塊級元素，并且能夠dispay轉換。
2、塊級元素（block）：默認獨占一行，不能并列顯示，能夠設置寬、高，寬度為父盒子的100%。例如：div、p、標題元素（h1-h6）、列表元素（ul li、dl dt dd）
3、行內元素（inline）：默認并排顯示，不能設置寬、高，寬度為內容的寬度。例如：span、a、b、i
4、margin-bottom 和margin-top 塌陷，以最大值為準。
脫標的元素的特性
只要是脫離了標準流，元素都是不區分行、塊的，體現在任何元素都可以設置寬、高了。都有了收縮的性質，就是不設置寬度，就自動縮減為里面內容的寬度。
浮動的元素有貼邊的性質，絕對定位的元素可以自由定位。

1.盒子的浮動（float 屬性）：

在標準流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界；在豎直方向和兄弟元素一次排列。不能并排。

CSS的float屬性默認為none，將float屬性設置為left或者right后，元素會向其父元素的左側或右側緊靠，同時默認情況下，盒子的寬度不再伸展，而是根據盒子里面的內容的寬度來確定。脫離了標準文件流。（但是，本顯示會占據一定的空間）。

這樣未填滿的部分就會進行填充。為了消除影響，不讓后面的元素因為浮動產生的這些空間進行填充，使用clear屬性進行消除浮動對后面的元素造成的影響：

clear 屬性：

clear屬性除了可以設置right、left 也可以設置為both，表示同時消除左右兩邊的影響。

clear屬性設置要放到 float 之后的要消除float影響的兄弟div里面，而不是float本身所在的div。

設置上clear之后，該div會把前面設置float的div 當做塊級div來看待。

使用示例：

因為浮動的元素都不在標準流里，如果盒子內部元素都是浮動元素，父級div 縮成一條。

解決方法，在后面加一個空div 并清除浮動影響.

高度消失后，父級將只保留margin和border的高度，與父級平行的div 將會緊挨著父級顯示，顯示漂浮的內容會占據空間，后面div內容會依次緊挨著漂浮的內容顯示。

脫離了標準流，但內容顯示上會被其他元素包圍。（其他元素可以“趁空而入”）

浮動可以使塊級元素并排顯示，用于頁面布局。

2.盒子的定位（position）：

static （標準流中默認）

盒子按照標準流（包括浮動方式）進行布局。

relative （位于標準流中）：

以標準流的排版方式為基礎，然后使盒子相對于它在原本的的標準位置偏移指定的距離。相對定位的盒子，仍在標準流中，它后面的盒子仍以標準流方式對待它。

只要標識該div position:relative ;使用 top left 等屬性可以設置偏移量，與父級元素的定位方式無關。

總結：

1.使用相對定位的盒子仍在標準流中，它對付款和兄弟盒子沒有任何影響。

2.使用相對定位的菏澤仍在標準流中，它對父塊和兄弟盒子沒有任何影響。

對浮動的盒子使用相對于定位也是一樣的

absolute （非標準流）

絕對定位，盒子位置以它的包含框為基準進行偏移，絕對定位的盒子從標準流中脫離，其他盒子就當這個盒子不存在一樣。

設置position后：div 脫離標準流，寬度自動按內容寬度，覆蓋在后面的元素之上。

設置top，left等屬性：

top:5px;

跑出了父級的div ，

把father div塊設置成相對定位：

1.使用絕對定位的盒子以它的”最近“的一個”已經定位“的祖先元素為基準進行偏移，如果沒有定位定位的祖先元素，那會以瀏覽器窗口進行定位。

已經定位：position 屬性被設置，且被設置的不是 static的任意一種方式。

最近，離該節點最近的一個已經定位的節點。

2.絕對定位的框從標準流中脫離，這意味著對其后兄弟盒子的定位沒有影響，其他盒子就好像這個盒子不存在一樣。

通過實驗可知道：

如果設置了絕對定位，而沒有設置偏移屬性，那么它仍將保持原來的位置，這個性質可以用于需要使某個元素脫離標準流，而仍然希望保持原來的位置的情況。

fixed （以窗口為基準）

固定定位，基準不是祖先元素而是瀏覽器窗口或者其他縣市設備的窗口。

z-index:

當塊被設置了position屬性時，該值便可設置各塊之間的重疊高低關系，默認z-index值為0

盒子的display屬性：

none :此元素不會被顯示。

block：顯示為塊級元素，前后會帶有換行符。

inline：默認此元素被顯示為內聯元素，元素前后沒有換行符。

list-item：作為列表顯示

圖書推薦：大家可以參考《CSS徹底研究》來進行學習，如需相關資料請留言！

動的目的：把多個盒子放在一行上

清除浮動的目的：解決父盒子高度為0的問題

清除浮動，也稱閉合浮動

注：本文不兼容IE6

未清除浮動實現情況：

圖1

清除后：

圖2

原代碼：

復制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

</style>

</head>

<body>

</div>

</body>

</html>

復制代碼

具體方法：

1.額外標簽法

在含浮動標簽后加兄弟盒子清除浮動

例：

復制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復制代碼

缺點：添加了許多空div

2.給父盒子overflow:hidden

觸發bfc模式（該名詞不懂請谷歌/百度，初學者可暫時略過)，直接清除浮動

復制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

overflow: hidden;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復制代碼

缺點：不可與position屬性配合使用

3.偽元素法

給父元素定義偽類:after(此處使用的是公共類clearfix）

復制代碼

.clearfix:after{

content:"";/*內容為空*/

visibility:hidden;/*將元素隱藏，但是在網頁中該占的位置還是占著*/

display:block;/*變成塊級元素*/

height:0;

clear:both;/*清除浮動*/

}

復制代碼

具體代碼：

復制代碼

<!DOCTYPE html>

<html>

<head>

.clearfix:after{

content:"";/*內容為空*/

visibility:hidden;/*將元素隱藏，但是在網頁中該占的位置還是占著*/

display:block;/*變成塊級元素*/

height:0;

clear:both;/*清除浮動*/

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復制代碼

缺點：IE8以上和非IE瀏覽器才支持

4.雙偽元素法

給父類加上偽類:before和:after

復制代碼

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

復制代碼

具體代碼：

復制代碼

<!DOCTYPE html>

<html>

<head>

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復制代碼

附：

對于上述4種方法，優先推薦方法3和4，當然1和2也可，可根據具體情況使用。

還有幾種亂七八糟的清除浮動方法，但是缺點多，故不提起.

最后你覺得我們的文章對你有幫助，歡迎關注我，可以私信我：久伴，領取學習資料，在評論下方可以關注我的學習群，你可以隨時在上面向我們提問，把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題，希望久伴可以伴隨你從入門到專家。

在線咨詢

上一篇：html+css+js 我的學校網頁設計與制作實例(6個頁面)
下一篇：HTML的主體結構

您的項目需求

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

整合營銷服務商

CSS 浮動布局實例

一、文本環繞布局

二、兩欄布局

三、三欄布局

四、文本省略跟隨布局

五、其他擴展布局

六、總結和說明

References

您的項目需求