div標籤消除浮動

2021-08-21 09:11:02 字數 515 閱讀 6965

(1)第乙個div

第二個div

**(1)的截圖為,可以看到,id2和id3並沒有在id1中。這就是沒有清除浮動的效果。

清除浮動的方法:

1、對父級設定合適的高度:對父級設定合適的高度進行清除浮動,父級內內容的高度為20px+2px=22px,在id1中增加樣式height=「22px」即可。

效果圖:。

缺點:對父級設定合適的高度來清除浮動的這種方法必須要知道父級內容的高度。比較不方便。

2、clear:both清除浮動:在父級元素結束前,增加以下紅色**,清除浮動。

第乙個div

第二個div

/*增加此句,清除浮動*/

效果圖:。

3、父級div定義overflow:hidden清除浮動:

id1增加overflow:hidden樣式,即可清除父級元素內使用float:left/float:right產生的浮動。

效果圖:。

以上是清除浮動的三種方法,望大神指教。

參考:

浮動的消除

當divouter內有乙個divinner,divinner如果設定了浮動後,divouter的大小會變得不受divinner影響,此刻就需要消除divinner的浮動效果 方法 給divouter設定overflow hidden overflow hidden 是指溢位部份隱藏,但卻能清除浮動。...

DIV浮動思想

html中包括兩種元素 內聯元素 行內元素 和 塊元素 怎麼理解呢?行內元素就是不換行的元素,並且大小可以自適應.例如 a img font span 塊元素就是不論內容多少 寬度高度多少都會換行顯示 例如 div p li 行內元素和塊元素的相互切換 用到 display inline block...

踩坑 消除浮動

又遇到了浮動問題,有一點點收穫,雖然還不完整,以後再補充 先給出乙個浮動的栗子 使用 clear 屬性來消除浮動 w3c 上 clear 的說明 clear 屬性定義了元素的哪邊上不允許出現浮動元素,如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下 上圖的情況,...