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