html/css中float浮動的用法實例詳解

一、float基礎(chǔ)用法示例
1、我們先建兩個div盒子,設(shè)置高度、寬度和背景顏色;
最開始兩個盒子在網(wǎng)頁上的位置如下:
然后我們將紅色盒子浮動到右邊
然后我們會發(fā)現(xiàn)紅色盒子浮動到了右邊,但是藍(lán)色盒子就直接上移到了原先紅色盒子的位置。
然后我們將藍(lán)色盒子也浮動到右邊看看效果:
我們會發(fā)現(xiàn)它會緊跟著紅色盒子排列,而不會受塊級元素影響?yīng)氄家恍小?/p>
二、浮動定位的基本規(guī)則
1、當(dāng)元素的float屬性取值為left或right時,元素屬于浮動定位;
2、若剩余空間無法放下浮動的盒子,則該盒子向下移動,直到具備足夠的空間能容納盒子,然后再向左或向右移動;
3、浮動盒子的頂邊不得高于上一個盒子的頂邊;
4、浮動盒子在擺放時,要避開常規(guī)流盒子;常規(guī)流盒子在擺放時,無視浮動盒子;
5、常規(guī)流盒子的自動高度計算時,無視浮動盒子
6、清除浮動:clear:both(左或右)。
總結(jié)
以上所述是小編給大家介紹的html/css中float浮動的用法實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
- 浮動指的是一個元素脫離文檔流,懸浮在父元素之上的現(xiàn)象。這篇文章給大家介紹css浮動 float屬性的相關(guān)知識,感興趣的朋友一起看看吧2020-02-24
- 這篇文章主要介紹了css float left布局換行不正常問題的解決的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-06
css 布局 之 兩端布局的實例代碼 (利用父級負(fù)的margin)
這篇文章主要介紹了css 布局 之 兩端布局 (利用父級負(fù)的margin)的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋2020-06-08- 這篇文章主要介紹了CCS中的margin:top塌陷問題,本文通過實例截圖給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-27
css中子元素設(shè)置margin-top為什么影響了父元素
這篇文章主要介紹了css中子元素設(shè)置margin-top為什么影響了父元素,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著2019-05-22- 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距,本文詳細(xì)的介紹了一下css外邊距折疊的實現(xiàn),分為3種情況,非常具有實用價值,需要的朋友可以參考下2018-10-30
CSS 同級元素position:fixed和margin-top共同使用的問題
這篇文章主要介紹了CSS 同級元素position:fixed和margin-top共同使用的問題的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-13- 這篇文章主要介紹了詳解css使既有浮動又有左右margin的多個元素兩端對其,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-07
- 這篇文章主要介紹了CSS中的float和margin的混合使用,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-12