當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

浮动（Float）

發布時間：2023/12/10 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了浮动（Float）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

浮動（Float）

1、什么是文檔流？

2、什么是浮動？

3、浮動的特點

浮動會脫離標準流

2.浮動會影響元素的顯示方式

3、設置浮動后，元素將沒有默認寬度，需要手動設置width：100%；

4、彼此相鄰的浮動元素

5、逃不出父盒子的手掌心

4、清除浮動

1、上下排列：

2、嵌套排列：

5、綜合案例

案例一，小米閃購時間模塊

案例二，淘寶業務模塊

案例三，導航條結構

浮動（Float）

1、什么是文檔流？

文檔流處在網頁的最底層，它表示的是一個頁面中的位置，我們所創建的元素默認都處在文檔流中

元素在文檔流中的特點：

塊元素：在文檔流中會獨占一行，塊元素會自上向下排列

行內元素：在文檔流中只占自身的大小，會默認從左向右排列

2、什么是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，浮動的框可以向左或向右移動，

直到它的外邊緣碰到包含框或另一個浮動框的邊框為止(會挨著父元素左邊或右邊排列，如果之前有浮動的元素會挨著浮動的元素排列)

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

浮動的元素雖然會脫離正常的文檔流，但它還是會影響到正常文檔流中的文字排版。

在CSS中，通過float屬性來定義浮動，其基本語法如下：

選擇器 {float: 屬性值; } 屬性值描述

left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

Float（浮動），最早用來控制圖片，以便其他元素（特別是文字）實現環繞圖片的效果，但它在布局時一樣非常有用。

<p><img src="./img/a0.PNG" width="120px" height="80px">這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本 </p> img {float: left; }

3、浮動的特點

浮動會脫離標準流

如果一個元素按照正常的標準流來顯示，會在html中所屬的位置上占位，后面的元素會緊跟著它，但是浮動脫離了標準流，以后我們在看到浮動的元素之后，不能以正常的標準流里進行判斷

浮動后會影響其他元素的顯示方式，因為其他元素會當他不存在。

浮動的元素雖然會脫離正常的文檔流，但它還是會影響到正常文檔流中的文字排版。

2.浮動會影響元素的顯示方式

浮動后的行內元素是可以設置寬高，塊級元素是內容的寬高，說白了會改變他的模式display為inline-block

?float就是隱性的把內聯元素轉化為塊元素，這是對內部的特性就是有物理特性，但是他不占據一行。對外是內聯元素的屬性

3、設置浮動后，元素將沒有默認寬度，需要手動設置width：100%；

4、彼此相鄰的浮動元素

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

<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px"> <img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/7266b3e7a65a9f11563c771a6aef55ea_254_96.jpg" alt="" width="120px" height="80px">img {margin: 10px;float: left; }

嘗試調整瀏覽器大小，看一看圖片沒有足夠大小顯示時會做什么？? 會跟著動

5、逃不出父盒子的手掌心

不管這么浮動，都在父盒子里面。記住：浮動使用的原則，一般是一起浮動?

如果父元素沒有設置高度，浮動的子元素不會撐開父元素

4、清除浮動

我們為什么要清除浮動呢？

本來4個黃色盒子是在綠色盒子內，因為對4個黃色盒子使用了float浮動，所以4個黃色盒子產生了浮動，導致綠色盒子不能撐開，這樣浮動就產生了。

<div class="wrap"><div></div><div></div><div></div><div></div></div>.wrap{border:1px solid green;width: 880px;margin:0 auto;}.wrap div{background: yellow;width: 200px;height: 100px;float: left;margin:10px;}

1、上下排列：

清除浮動clear屬性? (我被影響了，所以在我自己的標簽內添加clear）

這個屬性主要有三個值:

left 清除前面的左浮動元素帶給我的影響
right清除前面的右浮動元素帶給我的影響
both 同時清除前面的左右浮動元素帶給我的影響. 一般情況下選擇這個值比較方便.

.clear{clear:both }

clear:both; clear就是清除,both指的是左浮動,右浮動都要清除.意思就是:清除別人對我的影響

原理：父元素和冗余元素的高度都為0，并且浮動元素會蓋在其上方，當設置clear：both時，冗余元素會躲開浮動元素直到不被其蓋住，而父元素為了包裹住他自然就撐開了

2、嵌套排列：

當父元素沒有高度時，子盒子設置浮動會影響父元素后邊的元素,稱為高度塌陷。

高度塌陷的解決方法：

a 只需要給父元素加上高度：會導致布局不是很靈活

b 設置父元素overflow：hidden（BFC）：當子盒子高度需要超出父元素高度時，會受到影響

c 設置dispaly： inlin-block（BFC）：會影響到后面的布局

d 給浮動子盒子后加一個兄弟空標簽給空標簽加clear：會多加一個標簽

<div class="empty"></div>.empty {clear: both;}

e 給父元素設置after偽類清除：設置父元素中的最后一個子元素? ? ?推薦（是空標簽的加強版）

.fa::after{display: block;content: "";clear: both; }<div class="fa"><div class="sn"></div></div> 給sn設置了浮動，fa被影響了，所以給fa寫clear

f 給父元素也設置浮動讓它與子盒子在統一文檔流下就能被撐開了：會影響后面的盒子

5、綜合案例

案例一，小米閃購時間模塊

案例二，淘寶業務模塊

* {margin: 0;padding: 0; }a {text-decoration: none; } ul,li {list-style-type: none; } ul {width: 289px;margin: 40px auto; } li {width: 71px;height: 75px;float: left;text-align: center;border-left: 1px solid #ccc;border-top: 1px solid #ccc; } a span {background-image: url(./img/sprit.png);width: 26px;height: 26px; display: block;background-size: 100%;margin: 10px auto; } li p {color: black; } .youxi {border-right: 1px solid #ccc; } .caipiao,.dianying,.jiudian,.licai {border-bottom: 1px solid #ccc; } .licai {border-right: 1px solid #ccc; } .chexian span {background-position: 0 -46px; } .lvxing span {background-position: 0 -94px; } .youxi span {background-position: 0 -142px; }<ul><li class="huafei"><a href=""><span></span><p>充話費</p></a></li><li class="chexian"><a href=""><span></span><p>車險</p></a></li><li class="lvxing"><a href=""><span></span><p>旅行</p></a></li><li class="youxi"><a href=""><span></span><p>游戲</p></a></li><li class="caipiao"><a href=""><span></span><p>彩票</p></a></li><li class="dianying"><a href=""><span></span><p>電影</p></a></li><li class="jiudian"><a href=""><span></span><p>酒店</p></a></li><li class="licai"><a href=""><span></span><p>理財</p></a></li></ul>

案例三，導航條結構

<header><nav><p>主頁</p><p>新聞</p><p>聯系我們</p><p>關于我們</p></nav></header><div class="container"><aside><ul><li>HTML5</li><li>CSS</li><li>javaScript</li><li>Node.js</li><li>vue.js</li><li>react.js</li><li>小程序</li></ul></aside><article><h1 class="title">這是標題</h1><section><h2>HTML5</h2><P>1.體溫異常者，嚴禁進入教室。學生在教室如出現咳嗽、發燒、乏力應主動減少與他人接觸，立即上報輔導員并離開教室。 2.學生做好個人防護，在教室內應自覺各位就坐，應打開自習室窗戶，保持良好通風，暫停使用空調。1.體溫異常者，嚴禁進入教室。學生在教室如出現咳嗽、發燒、乏力應主動減少與他人接觸，立即上報輔導員并離開教室。 2.學生做好個人防護，在教室內應自覺各位就坐，應打開自習室窗戶，保持良好通風，暫停使用空調</P><p>1.體溫異常者，嚴禁進入教室。學生在教室如出現咳嗽、發燒、乏力應主動減少與他人接觸，立即上報輔導員并離開教室。 2.學生做好個人防護，在教室內應自覺各位就坐，應打開自習室窗戶，保持良好通風，暫停使用空調</p></section></article></div><footer><p>底部文字</p></footer>* {margin: 0;padding:0 ; } header nav {background-color: rgb(119,119,119);height: 50px;width: 1220px; } nav p {height: 100%;line-height: 50px;float: left;margin-left:10px;color: white;font-weight: 400px;padding-left: 10px;padding-right: 10px; } nav>p {margin-left: 0; }nav p:hover {background-color: green; }aside ul {margin: 10px 10px; } aside li {width: 180px;height: 35px;line-height: 35px;background-color: rgb(238,238,238);margin-bottom: 5px;font-family: Verdana;font-weight: lighter;color: #ccccccdd; } .container {float: left; } aside {float: left; }aside li:hover {background-color: rgb(32, 96, 104);color: white; } article {float: right;margin: 10px 10px; } article h1 {font-size: large;text-align: center;color: white;width: 1000px;height: 110px;line-height: 110px;background-color: rgb(33,150,243); } article section {width: 1000px;margin-top: 10px; } article p {margin-top: 10px;margin-bottom: 10px; } footer {clear: both;width: 1220px;height: 60px;margin-top: 500px;background-color: hsl(0, 4%, 18%); } footer p {text-align: center;height: 60px;line-height: 60px;color: white; }

總結

以上是生活随笔為你收集整理的浮动（Float）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

float

上一篇： PowerDesigner 逆向工程从
下一篇：自然语言理解——introduction