HTML定位和布局----float浮動(dòng)

時(shí)間：2023-09-07 00:30:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-07 00:30:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

HTML定位和布局----float浮動(dòng)：

1、定位體系一共有三種

（1）常規(guī)流；

（2）浮動(dòng)定位

（3）絕對(duì)定位

2、float屬性常用的語(yǔ)法：

（1）float：left；左浮動(dòng)

（2）float：right；右浮動(dòng)

（3）float：none；無(wú)浮動(dòng)

任何元素都可以使用浮動(dòng)，無(wú)論是塊級(jí)元素div、ul等等，還是行內(nèi)元素都可以浮動(dòng)，任何被聲明float的元素都會(huì)自動(dòng)被設(shè)置成塊元素，有了塊級(jí)元素的各種特點(diǎn)，可以設(shè)置寬高，可以設(shè)置內(nèi)外邊距。

但是很重要的一個(gè)點(diǎn)就是：float浮動(dòng)用于布局，可以很輕松的達(dá)到靠左靠右的效果，但是，當(dāng)使用完float浮動(dòng)之后，一定要記住清除浮動(dòng)，要不然很可能會(huì)造成高度坍塌。

3、float的影響

（1）對(duì)于行內(nèi)元素來(lái)說(shuō)，使用float之后，可以設(shè)置寬度高度了；

（2）對(duì)于塊級(jí)元素來(lái)說(shuō)，默認(rèn)占滿(mǎn)行的塊級(jí)元素，比如p標(biāo)簽，會(huì)自動(dòng)變成內(nèi)容撐開(kāi)寬度，但同樣可以設(shè)置寬高。

4、浮動(dòng)之后盒子的位置

（1）左浮動(dòng)的盒子向上向左排列；

（2）右浮動(dòng)的盒子向上向右排列；

（3）浮動(dòng)盒子的頂邊不得高于上一個(gè)盒子的頂邊；

（4）若剩余空間無(wú)法放下浮動(dòng)的盒子，則該盒子向下移動(dòng)，直至具備足夠的空間可以容納盒子，然后再向左或向右移動(dòng)。

5、當(dāng)常規(guī)流盒子遇上浮動(dòng)盒子

（1）浮動(dòng)盒子在擺放時(shí)會(huì)避開(kāi)常規(guī)流盒子；

（2）常規(guī)流盒子在擺放時(shí)會(huì)無(wú)視浮動(dòng)盒子；

（3）常規(guī)流盒子在自動(dòng)計(jì)算高度時(shí)，無(wú)視浮動(dòng)盒子——高度坍塌。

6、清除浮動(dòng)

為了避免造成高度坍塌，因此，我們經(jīng)常會(huì)在完成浮動(dòng)布局之后進(jìn)行清除浮動(dòng)。

清除浮動(dòng)的幾個(gè)語(yǔ)法：

（1）clear：none；不清除浮動(dòng)；

（2）clear：left；清除左浮動(dòng)，元素在左浮動(dòng)盒子的下方擺放；

（3）clear：right；清除右浮動(dòng)，元素在右浮動(dòng)盒子的下方擺放；

（4）clear：both；清除左右浮動(dòng)，元素在左右浮動(dòng)盒子的下方擺放。

原文鏈接：HTML定位和布局----float浮動(dòng) - cz11 - 博客園
作者：cz11