DIV CSS區塊框浮動設計

2021-09-07 05:53:38 字數 1716 閱讀 3048

在頁面布局的時候,能夠用絕對定位來實現,可是因為調整某個區塊框時其它區塊的位置不會對應的改變,所以這並非布局的首選方式。可是使用浮動的區塊框能夠向左或向右移動,直到它的外邊緣碰到包括它區塊的邊框或還有乙個浮動狂的邊框為止。

而且因為浮動框不在文件的普通流中,所以文件的普通流中的區塊框表現的像就浮動框不存在一樣。

1.不浮動區塊框排序

框(1)

框(2)

框(3)

2.將第一區塊框向右浮動

又一次定義#one選擇器,僅僅須要加入一行**:

#one
執行結果例如以下:

3.設定第乙個向左浮動

為了能讓大家看出效果,必需要調整三個區塊的大小。所以直接又一次寫**了。

框(1)

框(2)

框(3)

執行結果:

不難看出。框(2)被框(1)給覆蓋了。

僅僅有多出來的40px的寬度能看見。

由於框(1)浮動之後,就不屬於文件流範圍,相當於它原先的位置空了出來,所以框(2)自然就補了上去。

4.設定三個框都向左浮動

這個僅僅須要在例1中的div中加一句**:

float:left;
執行效果:

5.設定三個框向左(空間不足)

僅僅須要對應的改動三個區塊的大小就可以

框(1)

框(2)

框(3)

執行結果:

空間不足的話,區塊就自己主動下移了

6.第三個區塊被第乙個「卡住」

區塊3在上面沒有足夠的空間,下移的時候。區塊1多出的部分會自己主動阻擋區塊3的移動。

一共同擁有這麼幾種值,分別相應不同的清除效果。靈活使用這個屬性,非常多的問題都能簡單解決。

DIV CSS 清除浮動

div css 浮動效果是指,父元素在未定義高的情況下,由於子元素全部浮動脫離文字流,而造成父元素高的塌陷 ps 正常情況下,父元素的高是由子元素撐起來 或者因為部分子元素的而浮動,脫離文字流而造成其他元素的布局錯亂的情況。1 給未加浮動的子元素的css新增 clear both 若子元素都有浮動時...

div css之清除浮動

當元素有浮動屬性時,會對其父元素或後面的元素產生影響,會出現乙個布局錯亂的現象,可以通過清除浮動的方法來解決浮動的影響。浮動的清理 clear 值 none 預設值。允許兩邊都可以有浮動物件 left 不允許左邊有浮動物件 right 不允許右邊有浮動物件 both 左右兩側不允許有浮動物件。清除浮...

div css之清除浮動

當元素有浮動屬性時,會對其父元素或後面的元素產生影響,會出現乙個布局錯亂的現象,可以通過清除浮動的方法來解決浮動的影響。浮動的清理 clear 值 none 預設值。允許兩邊都可以有浮動物件 left 不允許左邊有浮動物件 right 不允許右邊有浮動物件 both 左右兩側不允許有浮動物件。清除浮...