21.HTML 浮動、定位和顯示屬性

SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。

浮動（Float）

浮動是CSS中用于實現元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。

.element {
  float: left; /* 或者 'right' */
}

使用場景

文字環繞圖片。
創建水平導航欄。
無網格系統時的列布局。

注意事項

清除浮動（Clearing Floats）：使用clear屬性可以防止元素被浮動元素覆蓋。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮動（Containing Floats）：浮動元素的父容器可能不會擴展以包含浮動的子元素，可以通過清除浮動或使用其他技術（如overflow）來解決這個問題。
浮動塌陷（Float Collapse）：浮動元素不占據空間，可能導致父元素高度塌陷。

定位（Position）

定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用場景

相對定位（Relative Positioning）：元素相對于其正常位置進行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

絕對定位（Absolute Positioning）：元素相對于最近的已定位父元素進行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相對于視口進行定位，即使頁面滾動也不會移動。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用戶的滾動位置在相對和固定定位之間切換。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事項

定位元素可能會脫離文檔流，影響周圍元素的布局。
z-index屬性可以控制堆疊順序。
絕對定位元素的容器應有position: relative;，以便正確定位。

顯示（Display）

display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用場景

塊級元素（Block）：display: block;使元素表現為塊級，占據新的行。

.block-element {
  display: block;
}

內聯元素（Inline）：display: inline;使元素在文本行中顯示，不開始新行。

.inline-element {
  display: inline;
}

內聯塊元素（Inline-Block）：display: inline-block;允許元素并排排列，同時擁有塊級元素的寬度和高度屬性。

.inline-block-element {
  display: inline-block;
}

彈性盒子（Flex）：display: flex;創建了一個彈性容器，其子元素可以靈活地在容器內排列。

.flex-container {
  display: flex;
}

網格（Grid）：display: grid;創建了一個網格容器，可以定義行和列以及在網格內放置元素。

.grid-container {
  display: grid;
}

隱藏元素（None）：display: none;將元素隱藏，且不為元素保留空間。

.hidden-element {
  display: none;
}

注意事項

使用display: none;與visibility: hidden;的區別在于后者仍保留元素占據的空間。
display: flex;和display: grid;為現代布局提供了更多控制，通常比浮動和定位更優。

示例

HTML結構

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS樣式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。

結語

浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的CSS特性，以保持我們技能的前沿性。

Web前端開發-CSS入門干貨01 、Web前端開發-CSS入門干貨02 、Web前端開發-CSS布局-盒子模型入門干貨介紹了CSS重要基礎概念選擇器和字體系列、文本系列、背景系列樣式以及CSS布局中元素的盒子模型，下面介紹CSS布局中另外兩個重要應用浮動和定位。

根據元素浮動、定位的特性可以將CSS布局分為三種：標準流、浮動流、定位流；

其中標準流是利用塊級元素獨占一行、自上而下，行內元素一行顯示、遇到阻礙自動換行、自左向右的布局方式。

1.浮動

（1）什么是浮動

元素脫離原先位置，不再占據空間，相對于未浮動元素類似漂浮在其上面；

浮動元素具有了行內塊元素特性，并實現貼邊布局。這里的邊可以是父級元素的邊也可以是同樣浮動的兄弟級元素的邊。

（2）浮動解決的問題

改變塊級元素默認的垂直布局方式，改為橫向布局。

行內塊樣式（display: inline-block;）也可以改變塊級元素的布局方式，但是不能靈活解決兩個塊級元素之間縫隙、不能靈活解決多個塊級元素分別實現左對齊、右對齊等問題。當然如果想要塊級元素隨意放置，那就要用到定位了。

（3）浮動的語法

選擇器 {float:none/left/right}，對選擇器選擇的元素實現不浮動、左浮動、右浮動。

（4）浮動的典型應用

通過不浮動的塊級元素+嵌套在其內內的浮動元素，實現頁面各種布局。

塊級元素實現縱向布局，浮動的元素實現橫向布局。

（5）因為浮動引出的問題

浮動元素通常嵌套在一個不浮動的元素內，進行配合使用；所有浮動元素的高以及外邊距之和不能超過那個不浮動元素，否則出現重疊。

那么當嵌套的浮動的子元素數量不確定時，那么父級元素的高度就不能確定。為了解決這個問題，提出來不設置父級元素的高度，讓子元素的高度之和成為父元素高度的方式；然而浮動的子元素具有脫離原先位置、不占空間的特點，那么父元素的高度只會是0，在父元素之后的兄弟元素就會與上一個父元素內浮動元素發生重疊。為了解決這個問題，提出來清除浮動。

（6）清除浮動

1）語法

選擇器 {clear:right/left/both};清除選擇器選中的元素的右浮動、左浮動、左右浮動。

2）清除浮動方式

a）額外標簽法

添加一個與浮動元素同級的空標簽（塊級），并為其設置清除浮動的樣式。

<style>
.one {float:left}
.kongbq {clear:both} 
</style>

<div class="box">
<div class="one"> </div>  
<div class="kongbq"> </div>
</div>

b）父級元素添加overflow樣式（常用）

語法：選擇器 {overflow:hidden}

c）父級元素添加after偽元素樣式（常用）

樣式如下：

.clearfixry:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

d）父級元素添加雙偽元素（常用）

樣式如下：

.clearfixry:before,.clearfixry:after {
content:"";
display:table;
}
.clearfixry:after {
clear:both;
}
.clearfixry { /*IE6、7專有*/
*zoom:1;
}

2.定位

（1）什么是定位

將html元素放置在任意指定的位置，提高頁面布局的靈活性。

（2）定位解決的問題

比如頁面側邊固定的工具欄、輪播圖

（3）定位的實現方式

利用定位模式+邊偏移，在樣式中設定定位模式，然后設定元素盒子模型邊偏移。

1）邊偏移

包括top、right、bottom、left四個分項。

2）定位模式分類

a）靜態定位（static）：元素無偏移，也即元素本身的默認布局方式。

語法：選擇器 {position:static;}

b）相對定位（relative）：相對元素自身原先位置設置偏移。（常用）

語法：選擇器 {position:relative;}

需要注意的是設置了相對定位的元素仍舊實際占據位置

c）絕對定位（absolute）：相對于元素的擁有定位的父級（或者更高級）元素進行定位。（常用）

語法：選擇器 {position:absolute;}

需要注意的（1）設置的絕對定位的元素的參考依據是有定位模式的父級或者更高級元素的。

（2）設置了絕對定位的元素會有浮動效果，即不再占有位置。

d）固定定位（fixed）：相對于瀏覽器可視區域，在某個位置固定不動。（常用）

語法：選擇器 {position:fixed;}

需要注意的（1）設置的固定定位的元素的參考依據瀏覽器當前可視窗口。

（2）設置了固定定位的元素會有浮動效果，即不再占有位置。

e）粘性定位（sticky）：被認為是相對定位和固定定位的混合。元素在跨越特定偏移前為相對定位，之后為固定定位。

語法：選擇器 {position:sticky; top:10px;}

需要注意的是（1）粘性定位一定要設置邊偏移（任何邊都可行），否則其功能和相對定位相同。

（2）設置的粘性定位的元素的參考依據瀏覽器當前可視窗口。

（3）設置的粘性定位的元素仍舊實際占據位置

#學問分亨官##閃光時刻二期##閃光時刻第二期主題征文#

實文章原名叫做 “碰到不支持 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

在線咨詢

上一篇：學會用HTML-flex布局制作漂亮的網頁
下一篇：因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離

您的項目需求

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

整合營銷服務商

21.HTML 浮動、定位和顯示屬性

浮動（Float）

使用場景

注意事項

定位（Position）

使用場景

注意事項

顯示（Display）

使用場景

注意事項

示例

HTML結構

CSS樣式

結語

1.浮動

2.定位

一、文本環繞布局

二、兩欄布局

三、三欄布局

四、文本省略跟隨布局

五、其他擴展布局

六、總結和說明

References

您的項目需求