1. 浮動元素也脫離了文檔流
2. 元素浮動之後都支援了寬高,變成了塊元素,
二、浮動的特點:只能沿著水平方向進行;
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>5.浮動的原理</title> <style> .box1 { width:200px; height: 200px; background-color: lightskyblue; /*設定左浮動*/ /*下面綠色塊看不到了,因為浮動元素脫離了文檔流,綠色自動上移佔據了原來藍色塊的位置*/ /*如果想看到綠色塊,只要將綠色塊寬高調整大一點就可以*/ /*float:left;*/ } .box2 { width:200px; /*width:250px;*/ height: 200px; /*height: 250px;*/ background-color: lightgreen; /* 如果第二個色塊也浮動的話:它會緊貼著第一個浮動的元素,這是為什麼呢? 因為第二個色塊也脫離了文檔流,與第一個是在同一個平面中,這點對排版很重要 */ float:left; } .box3 { width:200px; height: 200px; background-color: lightcoral; /*珊瑚色*/ /*下面浮動第三個色塊*/ /*float:left;*/ /*浮動還可以向右進行,它會一直向右側移動,直到碰到視窗最右側停止*/ /*float:right;*/ } .text { width: 100px; height: 100px; background-color: yellow; /*將行內元素進行浮動後,將會脫離文檔流,從而使其支援寬高設定*/ /*float:left;*/ } </style></head><body><div></div><div></div><div></div><!-- <span>是行內元素,它的寬高由內部文本決定,不支援使用者自訂寬高設定的--><!-- <span>php中文網</span> --><!-- 總結:浮動使元素脫離了文檔流,同時使行內元素也支援了寬高,表現出與區塊層級元素一樣的特徵 --></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
