今天就跟大家聊聊有關(guān)怎么在html/css中使用float浮動，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司專注于長清網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供長清營銷型網(wǎng)站建設(shè)，長清網(wǎng)站制作、長清網(wǎng)頁設(shè)計、長清網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造長清網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供長清網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

一、float基礎(chǔ)用法示例

1、我們先建兩個div盒子，設(shè)置高度、寬度和背景顏色；

最開始兩個盒子在網(wǎng)頁上的位置如下：

 然后我們將紅色盒子浮動到右邊

 然后我們會發(fā)現(xiàn)紅色盒子浮動到了右邊，但是藍色盒子就直接上移到了原先紅色盒子的位置。

然后我們將藍色盒子也浮動到右邊看看效果：

我們會發(fā)現(xiàn)它會緊跟著紅色盒子排列，而不會受塊級元素影響?yīng)氄家恍小?/p>

二、浮動定位的基本規(guī)則

1、當元素的float屬性取值為left或right時，元素屬于浮動定位;

2、若剩余空間無法放下浮動的盒子，則該盒子向下移動，直到具備足夠的空間能容納盒子，然后再向左或向右移動；

3、浮動盒子的頂邊不得高于上一個盒子的頂邊；

4、浮動盒子在擺放時，要避開常規(guī)流盒子；常規(guī)流盒子在擺放時，無視浮動盒子；

5、常規(guī)流盒子的自動高度計算時，無視浮動盒子

6、清除浮動：clear:both(左或右)。

看完上述內(nèi)容，你們對怎么在html/css中使用float浮動有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：怎么在html/css中使用float浮動
文章鏈接：http://chinadenli.net/article22/giijjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、定制網(wǎng)站、企業(yè)建站、網(wǎng)站策劃、網(wǎng)站設(shè)計

廣告

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