簡單小程序：登錄頁面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框寬度

        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框寬度
        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

實文章原名叫做 “碰到不支持 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 Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之后的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動，下面的文本流將環繞在它左邊：

實例

img

{

float:right;

}

彼此相鄰的浮動元素

如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這里，我們對圖片廊使用 float 屬性：

實例

.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

清除浮動 - 使用 clear

元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

使用 clear 屬性往文本中添加圖片廊：

實例

.text_line

{

clear:both;

}

嘗試一下 ?

更多實例

為圖像添加邊框和邊距并浮動到段落的左側

讓我們為圖像添加邊框和邊距并浮動到段落的左側

標題和圖片向右側浮動

讓標題和圖片向右側浮動。

讓段落的第一個字母浮動到左側

改變樣式，讓段落的第一個字母浮動到左側。

創建一個沒有表格的網頁

使用 float 創建一個網頁頁眉、頁腳、左邊的內容和主要內容。

CSS 中所有的浮動屬性

"CSS" 列中的數字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。

屬性	描述	值	CSS
clear	指定不允許元素周圍有浮動元素。	leftrightbothnoneinherit	1
float	指定一個盒子（元素）是否可以浮動。	leftrightnoneinherit	1

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：HTML 實例
下一篇：網站建設的頁腳要怎么設計？

您的項目需求

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

整合營銷服務商