html中浮動指的是什么

小編給大家分享一下html中浮動指的是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在HTML中，浮動就是讓元素可以向左或向右移動，直到它的外邊距碰到其父級的內邊距或者是上一個元素的外邊距，只需要給元素設置“float:left|right|none|inherit”樣式即可。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

一.什么是浮動（float)？

浮動就是讓元素可以向左或向右移動，直到它的外邊距碰到其父級的內邊距或者是上一個元素的外邊距(這里指的上一個元素不管它有沒有設置浮動，都會緊挨著上一個元素）

二.浮動（float)語法：

float:left或者right或者none或者inherit

left：讓元素向左浮動

right：讓元素向右浮動

none：讓元素不浮動

inherit：讓元素從父級繼承浮動屬性

三.浮動的特性

1.支持所有的css樣式

2.內容撐開寬高

3.多個元素設置浮動，會排在一排

4.脫離文檔流

5.提升層級半級

也就是說：一個元素設置了浮動屬性后，下一個元素就會無視這個元素的存在，但是下一個元素中的文本內容依然會為這個元素讓出位置使自身的文本內容環繞在設置浮動元素的周圍

注意：不管是什么屬性的元素，如果設置了浮動屬性，該元素就變成了具有inline-block屬性的元素

四.浮動的具體表現

1、如果三個元素為block元素，在未設置浮動前

html樣式：

<div class="class1">我是塊級元素1，沒有設置浮動</div>
<div class="class2">我是塊級元素2，沒有設置浮動</div>
<div class="class3">我是塊級元素3，沒有設置浮動</div>

css樣式為：

.class1{width:100px;height:100px;background:palegreen;}
.class2{width:120px;height:130px;background:gold;}
.class3{width:160px;height:180px;background:red;}

瀏覽器顯示的結果為：

如果給第一個元素設置向左浮動：

<div class="class1">我是塊級元素1，設置向左浮動</div>
<div class="class2">我是塊級元素2，沒有設置浮動</div>
<div class="class3">我是塊級元素3，沒有設置浮動</div>

css樣式為：

.class1{width:100px; height:100px;background:palegreen;float:left;}
.class2{width:120px; height:130px;background:gold;}
.class3{width:160px; height:180px;background:red;}

瀏覽器顯示的結果為：

結論：

1）沒有設置浮動的元素會填充浮動元素留下來的空間

2）浮動元素會和非浮動元素發生重疊，浮動元素會在圖層的最上面

3）使用浮動時，該元素會脫離文檔流，后面的元素會無視這個元素，但依然會為這個浮動元素讓出位置，并且元素中的文字內容會環繞在其周圍

2、如果一個塊級元素和一個行內元素（或者是一個內斂塊級元素）

<divclass="a">我是塊級元素，沒有設置float</div>
<span class="b">我是行內元素，沒有設置float</span>

css樣式為：

.a{width:320px;height:230px;background:gold;}
.b{background:red;}

瀏覽器顯示的結果為：

如果給第一個元素設置向左浮動：

<div class="a">我是塊級元素，且設置了float</div>
<span class="b">我是行內元素，沒有設置float</span>

css樣式為：

.a{width:320px; height:230px; background:gold;float:left;}
.b{background:red;}

瀏覽器顯示的結果為：

結論；

后面的元素會緊跟在前面的元素后面，且后面的元素會根據自身元素的特點來決定是否需要換行

3、如果前面的元素為行內元素，后面的為塊級元素

<span class="c">我是行內元素，沒有設置float</span>
<div class="d">我是塊級元素,沒有設置float</div>

css樣式為：

.c{width:320px;height:230px;background:gold;}
.d{width:350px;height:280px;background:red;}

瀏覽器顯示的結果為：

如果給第一個元素設置浮動

<span class="c">我是行內元素，并且設置float</span>
<div class="d">我是塊級元素,沒有設置float</div>

css樣式為：

.c{width:320px; height:230px; background:gold;float:left;}
.d{width:350px; height:280px;background:red;}

瀏覽器顯示的結果為：

總結：

1）行內元素設置了浮動，該元素則變成了內斂塊級標簽，可以設置寬高

2）脫離了文檔流，原有的空間被后面沒有設置浮動的元素占據

4、如果兩個都是行內標簽

<span class="e">我是行內元素，沒有設置float</span>
<span class="f">我是行內元素，沒有設置float</span>

css樣式：

.e{width:320px;height:230px;background:gold;}
.f{width:350px;height:280px;background:red;}

瀏覽器顯示的結果為：

如果給第一個設置了浮動：

<span class="e">我是行內元素，且設置了float</span>
<span class="f">我是行內元素，沒有設置float</span>

css樣式：

.e{width:320px; height:230px; background:gold;float:left;}
.f{width:350px; height:280px;background:red;}

瀏覽器顯示的結果為：

總結：

后面的元素會緊跟在前面元素的后面，后面的元素會根據自身元素的特點來決定是否需要換行

五.浮動的具體細節

1）浮動元素不會在其浮動方向上溢出父級的包含塊

也就是說元素左浮動，其左外邊距不會超過父級的左內邊距，元素右浮動，其右外邊距不會超過父級的右內邊距

2）浮動元素的位置受到同級同向浮動元素的影響

也就是說同一父級中有多個浮動元素，后一個元素的位置會受到前一個浮動元素位置的影響，他們不會相互遮擋，后一個浮動元素會緊挨著前一個浮動元素的左外邊距進行定位，如果當前空間不足，則會換行，否則會放置在前一個浮動元素的下面

<div id="wrap2">

   <div class="class1"></div>

   <div class="class2"></div>

   <div class="class3"></div>

   <div class="class4"></div>

</div>

css樣式

#wrap2{width:550px;height:600px;border:3pxsolid red;}
.class1{width:200px;height:400px;background: blue;float:left;}
.class2{width:200px;height:200px;background: yellow;float:left;}
.class3{width:200px;height:200px;background: fuchsia;float:left;}
.class4{width:200px;height:200px;background: chartreuse;float:left;}

3）浮動元素不會與不同方向的浮動元素相重疊

4）如果父級中的浮動元素的高度大于父級的高度，則該浮動元素會溢出該父級元素

<p id="wrap3">
   <p class="class5"></p>
   <p class="class6"></p>
   <p class="class7"></p>
   <p class="class8"></p>
</p>

css樣式

#wrap3{width:350px;height:600px;border:3pxsolid red;}
.class5{width:200px;height:200px;background: blue;float:left;}
.class6{width:200px;height:200px;background: yellow;float:right;}
.class7{width:200px;height:200px;background: fuchsia;float:left;}
.class8{width:200px;height:200px;background: chartreuse;float:right;}

以上是“html中浮動指的是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！