HTML清楚浮動的方法

2022-07-23 03:06:13 字數 1069 閱讀 4113

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>浮動布局

title

>

<

style

type

="text/css"

>

/*第一種清楚浮動的方法,父元素上設定overflow:hidden;

*//*

ul*/

/*第二種清楚浮動的方法,在父元素上設定偽類 這是最好的清楚浮動方法

*//*

ul:after

*//*

第三種清楚浮動的方法,寫乙個空的元素,設定樣式為clear:both;

*//*

.clear

*/ul li

style

>

head

>

<

body

>

<

ul>

<

li>新聞列表1

li>

<

li>新聞列表2

li>

<

li>新聞列表3

li>

<

div

class

="clear"

>

div>

ul>

<

div>我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行我並沒有設定浮動,我是塊級元素我要自己一行

div>

body

>

html

>

在HTML中清楚浮動! 使用

div class clear 這裡的clear是樣式名。樣式寫在css檔案中從名稱來看估計你的樣式為 clear clear both 作用 該屬性的值指出了不允許有浮動物件的邊。這個屬性是用來控制float屬性在文件流的物理位置的。當屬性設定float 浮動 時,他所在的物理位置已經脫離文件流了...

清楚浮動的幾種方法

清楚浮動的幾種方法 為什麼我們用float left right之後會對其父輩或兄弟元素產生影響 浮動框不在普通的文件流中,它脫離了文件流,所以包圍的內容的不佔據空間。如下面的 1221233 uriiot rrr如何讓包圍的元素在視覺上包圍浮動元素呢?1 在緊靠最後乙個浮動元素之後新增乙個空元素並...

清楚浮動的幾種方法

標準流 盒子會各佔整行位置。子盒子若是標準流,父盒子雖然沒有高度,但是會撐開父盒子高度。浮動 盒子浮了起來,不會佔據原來的位置,若父盒子沒有定義高度,則不會撐開父盒子,父盒 子高度為0。浮動可以讓多個塊級元素在一行顯示,且塊與塊之間沒有空隙,但要注意給父盒子清除浮動,否則父盒子不會被撐開 清除浮動的...