HTML+CSS：css元素浮動詳解，使用浮動制作導航欄菜單

天這篇文章我們來說一下css的浮動屬性（float），給塊狀元素添加float屬性可以使其轉變為行內元素，也就是我們所說標簽對象浮動居左靠左（float:left）和浮動居右靠右(float:right)。

（1）float使用語法

css的float主要有3個屬性值none、left、right，默認為none；具體的使用如下所示：

float:none; （不使用浮動）

float:left; （靠左浮動）

float:right; （靠右浮動）

（2）float使用案例

我們通過案例來實際演練一下float元素的使用技巧。

1、float:left的使用練習

我們這里創建一個導航條，導航條包含首頁、關于我們、新聞中心、案例展示等欄目名稱。具體的網頁代碼以及顯示效果就如下圖所示：

由上圖可以看出默認的樣式是豎排顯示的，但是我們常見的網頁導航條都是橫排顯示的，這時候我們就可以使用float屬性來使塊狀元素轉變為行內元素，并讓居左顯示。

這里我們創建一個寬度為980px的導航條，給子元素（li）添加float的屬性并對齊進行填充（padding）以及外間距（margin）的潤色。具體的網頁代碼以及顯示效果就如下圖所示：

網頁中的顯示效果：

2、float:right的使用練習

float:right顧名思義用于元素靠右對齊，我們來看下面的一個例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。

我們再網頁中可以看到圖片已經浮動到網頁的右側中去了。

好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會出現什么問題，下邊文章我們會給大家講解如何清除float帶來的負面影響。

每日金句：你不能拼爹的時候，你就只能去拼命！喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

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

動是css里面布局用的最多的屬性。

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了, 無論它原來是個div還是個span。

浮動的性質：脫標、貼邊、字圍、收縮。

浮動的元素脫標

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

兩個元素并排了, 并且兩個元素都能夠設置寬度、高度了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了, 無論它原來是個div還是個span。

浮動的元素互相貼靠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

浮動的元素有"字圍"效果

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div擋住了p, 但是p中的文字不會被擋住, 形成"字圍"效果。如果將p標記換成div, 則不會有"字圍"效果。

詳細案例見：CSS|實例|圖文混排

收縮：一個浮動的元素, 如果沒有設置width, 那么將自動收縮為文字的寬度(這點非常像行內元素)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮動的清除

實驗：現在有兩個div, div身上沒有任何屬性。每個div中都有li, 這些li都是浮動的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

我們本以為這些li, 會分為兩排, 但是, 第二組中的第1個li, 去貼靠第一組中的最后一個li了。

第二個div中的li, 去貼第一個div中最后一個li的邊了。

原因就是因為div沒有高度, 不能給自己浮動的孩子們, 一個容器。

清除浮動方法1：給浮動的元素的祖先元素加高度。缺陷: 只限于父元素高度確定的情況下。

如果一個元素要浮動, 那么它的祖先元素一定要有高度。高度的盒子, 才能關住浮動。

解決方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 為父元素設置高度 */
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法2：clear:both;

網頁制作中, 高度height很少出現。為什么? 因為能被內容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

腦弄大開：能不能不寫height, 也把浮動清除了呢? 也讓浮動之間, 互不影響呢?

clear:both;

clear就是清除, both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。

這種方法有一個非常大的、致命的問題, margin失效了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法3：隔墻法

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

墻! <div class="cl h18"></div>

這個墻, 隔開了兩部分浮動, 兩部分浮動, 互不影響。

近些年, 有演化出了"內墻法"：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設計模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內墻法本質-給沒有高的父親撐出高

因為一個父元素不可能被浮動的子元素撐出高度, 解決的方法：內墻法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隱藏"的意思。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端開發工程師又發現了, 能做偏方。

一個父親不能被自己浮動的兒子，撐出高度。但是, 只要給父親加上overflow:hidden; 那么, 父親就能被兒子撐出高了。這是一個偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>

浮動清除方法5: 利用偽元素清除浮動

在線咨詢

上一篇：微信突然打不開網頁！http惹禍
下一篇：在 .NET 平臺使用ReflectionDynamicObject優化反射調用代碼

您的項目需求

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

整合營銷服務商