CSS浮動簡明小結

2022-02-09 14:20:45 字數 3628 閱讀 3087

1. span元素在預設情況下忽略 width 和 height，除非設定其 display 屬性為 block 或 inline-block。這是因為只有塊級元素和行內塊級元素才能夠有自己的寬高。

<


body


>


<


span 


id="haha"


>這是乙個行內元素


span


>


body


>


​​#haha
2. 在將 span 元素設定成塊級元素後如何居中顯示文字？ 設定 line-height 屬性為 height 的值，並設定 text-align 為 center。

<


body


>


<


span 


id="haha"


>這是乙個行內元素


span


>


body


>


​​#haha
3. 不要在 p 元素中巢狀 div。 這會導致外層的 p 元素會被拆分成兩個同級的 p 元素，並且原先內嵌的 div 會被提公升到拆分後的兩個 p 元素中間。

<


div>


<


p>


這是p標籤的文字


<


div>這裡是div的文字


div>


p>


div>
如上的原始碼會導致生成如下圖所示的結果：

p 標籤應該用來存放文字而不是用於布局。

4. 浮動布局。

假設有如下的**：

<


div>


<


div 


class


="box"


>第乙個盒子


div>


<


div 


class


="box"


>第二個盒子


div>


<


div 


class


="box"


>第三個盒子


div>


div>


​​.box
這三個帶 box 類屬性的 div 會從上到下依次排開，因為 div 是塊級元素會獨佔一行：

為了讓這三個 div 橫向上依次排開，需要對它們進行浮動布局，即讓它們「飄起來」。注意，飄起來後只有兩個方向，向左浮動和向右浮動。使用「float：left|right」可以達到漂浮的目的。

5. 行內元素的浮動布局。

對行內元素使用浮動布局，會使得其轉變為行內塊級元素。

<


div>


<


span 


class


="box"


>第乙個盒子


span


>


<


span 


class


="box"


>第二個盒子


span


>


<


span 


class


="box"


>第三個盒子


6. 清除浮動：清除浮動就是給飛出去的元素填坑，好讓後面的元素不頂過來。


<


div>


<


div 


class


="box fl"


>第乙個盒子


div>


<


div 


class


="box fl"


>第二個盒子


div>


<


div 


class


="box fl"


>第三個盒子


div>


<


div 


class


="box"


>第四個盒子


div>


div>


.box


​​.fl


.fr
如上所示的**，如果不清除浮動的話，第四個盒子是看不見的。清除浮動的方法有兩種。


（1）在浮動定位的最後乙個元素後面新增乙個空元素（如 div ），並對其應用樣式「clear:both」即可。


<


div>


<


div 


class


="box fl"


>第乙個盒子


div>


<


div 


class


="box fl"


>第二個盒子


div>


<


div 


class


="box fl"


>第三個盒子


div>


<


div 


style


="clear:both"


>


div>


​　　<


div 


class


="box"


>第四個盒子


div>


div>


（2）【推薦】使用偽類。


/*


清除浮動 


*/.clearfix:before, .clearfix:after.clearfix:after


給需要清除浮動的那個元素新增上 clearfix 的 class 即可，例如在本例中，需要給三個盒子外面套一層 div，加上 clearfix 的class，就可以了。


<


div 


class


="clearfix"


>


<


div 


class


="box fl"


>第乙個盒子


div>


<


div 


class


="box fl"


>第二個盒子


div>


<


div 


class


="box fl"


>第三個盒子


div>


div>


<


div 


class


="box"


>第四個盒子


CSS浮動以及清除浮動 戀天小結
可以讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了 什麼是浮動？元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。在css中，通過float屬性來定義浮動，其基本語法格式如下 選擇器float left right none 屬性值 描...


CSS清除浮動常用方法小結
本文 常用的清除浮動的方法有以下三種 此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 三種清除浮動方法如下 1 使用空標籤清除浮動。我用了很久的一種方法，空標籤可以是div標籤，也可以是p標籤。我習慣用，夠簡短，也有很多人用，只是需要另外 為其清除邊框，但理論上可以是任何...


CSS 小結筆記之清除浮動
浮動是乙個非常好用的屬性，但是有時會出現一些問題，需要進行清除浮動。例如 在父盒子沒有給出高度的情況下，子盒子浮動不會將父盒子撐開來。清除浮動使用clear left right both一般使用clear both，具體方法如下 1 在浮動標籤後邊新增乙個額外的clear標籤例如 這樣做的方法 例...