html中浮動指的是什么

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

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一.什么是浮動（float)？

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

二.浮動（float)語法：

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

left：讓元素向左浮動

right：讓元素向右浮動

none：讓元素不浮動

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

三.浮動的特性

1.支持所有的css樣式

2.內(nèi)容撐開寬高

3.多個元素設(shè)置浮動，會排在一排

4.脫離文檔流

5.提升層級半級

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

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

四.浮動的具體表現(xiàn)

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

html樣式：

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

css樣式為：

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

瀏覽器顯示的結(jié)果為：

如果給第一個元素設(shè)置向左浮動：

<div class="class1">我是塊級元素1，設(shè)置向左浮動</div>
<div class="class2">我是塊級元素2，沒有設(shè)置浮動</div>
<div class="class3">我是塊級元素3，沒有設(shè)置浮動</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;}

瀏覽器顯示的結(jié)果為：

結(jié)論：

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

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

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

2、如果一個塊級元素和一個行內(nèi)元素（或者是一個內(nèi)斂塊級元素）

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

css樣式為：

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

瀏覽器顯示的結(jié)果為：

如果給第一個元素設(shè)置向左浮動：

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

css樣式為：

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

瀏覽器顯示的結(jié)果為：

結(jié)論；

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

3、如果前面的元素為行內(nèi)元素，后面的為塊級元素

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

css樣式為：

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

瀏覽器顯示的結(jié)果為：

如果給第一個元素設(shè)置浮動

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

css樣式為：

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

瀏覽器顯示的結(jié)果為：

總結(jié)：

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

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

4、如果兩個都是行內(nèi)標簽

<span class="e">我是行內(nèi)元素，沒有設(shè)置float</span>
<span class="f">我是行內(nèi)元素，沒有設(shè)置float</span>

css樣式：

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

瀏覽器顯示的結(jié)果為：

如果給第一個設(shè)置了浮動：

<span class="e">我是行內(nèi)元素，且設(shè)置了float</span>
<span class="f">我是行內(nèi)元素，沒有設(shè)置float</span>

css樣式：

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

瀏覽器顯示的結(jié)果為：

總結(jié)：

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

五.浮動的具體細節(jié)

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

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

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中浮動指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！