關於浮動和內聯元素的使用

2022-09-01 04:12:09 字數 434 閱讀 9271

(1)對於同一級的兩個塊,如果我們要使幾個塊可以在同乙個水平線上排開,則這幾個同一級的塊要同時設定浮動float:left或者同時設定內聯元素display:inline-block;(如果同一級的塊只有有一些設定了浮動一些沒有設定浮動那麼這些塊很有可能會相互疊在一起);

1.1同一級的塊同時設定浮動float:left或者同時設定內聯元素display:inline-block這兩者的區別在於:

同一級的塊同時設定浮動float:left時各個塊之間的間隙大於同時設定內聯元素display:inline-block時各個塊之間的間隙;

1.2如果要清除浮動我們要使用clear:both/left/right;

(1)對於已經設定了浮動的塊的父級塊,如果父級塊沒有同樣的設定浮動,則很有可能父級塊會被擠出來,所以在這種情況下如果要保證兩個塊之間的相互位置關係不變我們應該設定父級塊元素的高度

塊元素與內聯元素的盒子模型 浮動

1.盒子模型 2.盒子模型的邊框 3.盒子模型的內邊距 4.盒子模型的外邊距 5.垂直外邊距的重疊 6.清除瀏覽器缺省內外邊距 7.內聯元素的盒子 8.dispaly詳解 9.overflow詳解 10.文件流 11.浮動 12.清除浮動 我是乙個段落 我是乙個段落 我是乙個段落 我是乙個span ...

float 關於使用浮動 和清除浮動

float的特點 1,可以使塊元素在一行顯示 元素浮動後會脫標不佔位 2,可以使元素進行模式轉換.但是,但是,但是 有優點 就一定有缺點.有時候一不留神就會被它的缺點折磨的抓狂.我有次用float給父元素裡的所有子元素都新增了浮動效果,但是沒有給父元素設定高度.結果是 廢話不多說 上圖 是這樣的 我...

塊元素和內聯元素

block元素的特點 總是在新行上開始 高度,行高以及外邊距和內邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度。它可以容納內聯元素和其他塊元素 inline元素的特點 和其他元素都在一行上 高,行高及外邊距和內邊距不可改變 寬度就是它的文字或的寬度,不可改變 內聯元素只能容納文字或者其他...