浮動導致布局變動

2022-06-06    分類: 網(wǎng)站建設

float: none | left | right | inherit

none:默認值,即不浮動

left:向頁面的左側浮動

right:向頁面的右側浮動

inherit:繼承父元素的float值(一般不建議使用inherit,ie不支持這個選項)

重點:

1、對于塊級元素來說,在不設置寬度的情況系,默認的寬度是100%,一旦設置了浮動,
它的寬度就會根據(jù)內容進行自動調整。

2、設置了浮動的元素會脫離正常的文檔流,我們可以這樣理解:設置浮動后,元素不僅在Y軸上浮動起來,
在Z軸上,也浮動起來。默認情況下,父元素的高度會根據(jù)子元素的內容進行調整,
而如果我們將子元素設置為浮動,父元素的高度就會變?yōu)?。

3、雖然浮動的元素脫離了文檔流,但是里面的內容仍然占據(jù)空間,會根據(jù)相對位置進行布局。

這里舉個例子:

 
 
 
 
float 
 
 
div_float
div_none

網(wǎng)頁標題:浮動導致布局變動
本文鏈接:http://muchs.cn/news/163704.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設、微信小程序靜態(tài)網(wǎng)站、響應式網(wǎng)站、網(wǎng)站建設、外貿建站

廣告

聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設