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

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、甘谷網(wǎng)絡(luò)推廣、微信小程序、甘谷網(wǎng)絡(luò)營銷、甘谷企業(yè)策劃、甘谷品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供甘谷建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.chinadenli.net

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

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

一.什么是浮動(dòng)（float)？

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

二.浮動(dòng)（float)語法：

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

left：讓元素向左浮動(dòng)

right：讓元素向右浮動(dòng)

none：讓元素不浮動(dòng)

inherit：讓元素從父級(jí)繼承浮動(dòng)屬性

三.浮動(dòng)的特性

1.支持所有的css樣式

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

3.多個(gè)元素設(shè)置浮動(dòng)，會(huì)排在一排

4.脫離文檔流

5.提升層級(jí)半級(jí)

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

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

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

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

html樣式：

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

css樣式為：

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

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

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

<div class="class1">我是塊級(jí)元素1，設(shè)置向左浮動(dòng)</div>
<div class="class2">我是塊級(jí)元素2，沒有設(shè)置浮動(dòng)</div>
<div class="class3">我是塊級(jí)元素3，沒有設(shè)置浮動(dòng)</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è)置浮動(dòng)的元素會(huì)填充浮動(dòng)元素留下來的空間

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

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

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

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

css樣式為：

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

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

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

<div class="a">我是塊級(jí)元素，且設(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é)論；

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

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

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

css樣式為：

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

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

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

<span class="c">我是行內(nèi)元素，并且設(shè)置float</span>
<div class="d">我是塊級(jí)元素,沒有設(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è)置了浮動(dòng)，該元素則變成了內(nèi)斂塊級(jí)標(biāo)簽，可以設(shè)置寬高

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

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

<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é)果為：

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

<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é)：

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

五.浮動(dòng)的具體細(xì)節(jié)

1）浮動(dòng)元素不會(huì)在其浮動(dòng)方向上溢出父級(jí)的包含塊

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

2）浮動(dòng)元素的位置受到同級(jí)同向浮動(dòng)元素的影響

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

<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）浮動(dòng)元素不會(huì)與不同方向的浮動(dòng)元素相重疊

4）如果父級(jí)中的浮動(dòng)元素的高度大于父級(jí)的高度，則該浮動(dòng)元素會(huì)溢出該父級(jí)元素

<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中浮動(dòng)指的是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：html中浮動(dòng)指的是什么
網(wǎng)站路徑：http://www.chinadenli.net/article32/pejcpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、虛擬主機(jī)、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計(jì)公司、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)