溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)怎么在html/css中使用float浮動(dòng)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
一、float基礎(chǔ)用法示例
1、我們先建兩個(gè)div盒子，設(shè)置高度、寬度和背景顏色；
最開(kāi)始兩個(gè)盒子在網(wǎng)頁(yè)上的位置如下：
然后我們將紅色盒子浮動(dòng)到右邊
然后我們會(huì)發(fā)現(xiàn)紅色盒子浮動(dòng)到了右邊，但是藍(lán)色盒子就直接上移到了原先紅色盒子的位置。
然后我們將藍(lán)色盒子也浮動(dòng)到右邊看看效果：
我們會(huì)發(fā)現(xiàn)它會(huì)緊跟著紅色盒子排列，而不會(huì)受塊級(jí)元素影響?yīng)氄家恍小?/p>
二、浮動(dòng)定位的基本規(guī)則
1、當(dāng)元素的float屬性取值為left或right時(shí)，元素屬于浮動(dòng)定位;
2、若剩余空間無(wú)法放下浮動(dòng)的盒子，則該盒子向下移動(dòng)，直到具備足夠的空間能容納盒子，然后再向左或向右移動(dòng)；
3、浮動(dòng)盒子的頂邊不得高于上一個(gè)盒子的頂邊；
4、浮動(dòng)盒子在擺放時(shí)，要避開(kāi)常規(guī)流盒子；常規(guī)流盒子在擺放時(shí)，無(wú)視浮動(dòng)盒子；
5、常規(guī)流盒子的自動(dòng)高度計(jì)算時(shí)，無(wú)視浮動(dòng)盒子
6、清除浮動(dòng)：clear:both(左或右)。
看完上述內(nèi)容，你們對(duì)怎么在html/css中使用float浮動(dòng)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
