html/css中float浮動(dòng)的用法實(shí)例詳解
我要評(píng)論一、float基礎(chǔ)用法示例
1、我們先建兩個(gè)div盒子，設(shè)置高度、寬度和背景顏色；
最開始兩個(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í)，要避開常規(guī)流盒子；常規(guī)流盒子在擺放時(shí)，無(wú)視浮動(dòng)盒子；
5、常規(guī)流盒子的自動(dòng)高度計(jì)算時(shí)，無(wú)視浮動(dòng)盒子
6、清除浮動(dòng)：clear:both(左或右)。
總結(jié)
以上所述是小編給大家介紹的html/css中float浮動(dòng)的用法實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
浮動(dòng)指的是一個(gè)元素脫離文檔流，懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動(dòng) float屬性的相關(guān)知識(shí)，感興趣的朋友一起看看吧2020-02-24
css float left布局換行不正常問(wèn)題的解決
這篇文章主要介紹了css float left布局換行不正常問(wèn)題的解決的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-06
css 布局 之 兩端布局的實(shí)例代碼 （利用父級(jí)負(fù)的margin）
這篇文章主要介紹了css 布局 之 兩端布局 （利用父級(jí)負(fù)的margin）的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋2020-06-08
這篇文章主要介紹了CCS中的margin：top塌陷問(wèn)題,本文通過(guò)實(shí)例截圖給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-27
css中子元素設(shè)置margin-top為什么影響了父元素
這篇文章主要介紹了css中子元素設(shè)置margin-top為什么影響了父元素，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-05-22
外邊距折疊指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距，本文詳細(xì)的介紹了一下css外邊距折疊的實(shí)現(xiàn)，分為3種情況，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-30
CSS 同級(jí)元素position:fixed和margin-top共同使用的問(wèn)題
這篇文章主要介紹了CSS 同級(jí)元素position:fixed和margin-top共同使用的問(wèn)題的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-13
詳解css使既有浮動(dòng)又有左右margin的多個(gè)元素兩端對(duì)其
這篇文章主要介紹了詳解css使既有浮動(dòng)又有左右margin的多個(gè)元素兩端對(duì)其,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-07
這篇文章主要介紹了CSS中的float和margin的混合使用，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-12
