0%

[CSS] 沒有清除浮動,還是沒搞清楚元素特性?

昨天在六角學院社團看到有人發問排版問題,因為是我第一次試著替別人 debug 因此特別想記錄下來,順便當作我使用部落格紀錄前端學習之路的濫觴。


這位同學的問題是這樣的:

「 請問大家,相似的浮動為什麼第一張圖 submit 會跑掉,在 textarea 結束加 clearfix 才正常(第二張圖),第三張就不會?」

圖 1
圖 2
圖 3

我這樣回答:

「因為第一張 textarea 沒有下 display:block,所以按鈕就跟它並排了;而第三張的 input text 都有下 display:block,所以按鈕就不會並排。」

<input><img>display 預設都是 inline-block,也就是說如果不指定為 block,排完它的寬度後,如果還有空間,底下非 block 的元素或浮動元素就會跑上來。inlineinline-block 的差別在於,前者不能指定寬高,而後者可以。

第一個圖會跑版的原因是因為 <textarea> 沒有下 display:block,所以 float 的按鈕便與他並排了。
並排之後整個 <form> 加上左邊的 <h6> 的寬度後,整體超過了 .faqform,所以才會掉下來。

第二個圖裡,<textarea> 下面多加了一塊 <div>,這個 <div> 的屬性是 block ,所以不是因為加了 clearfix,如果把那個 class 去掉,只留下 <div>,也會有同樣效果。如此,接下來的按鈕便不會前面的原素並排,整個 <form> 加上左邊 <h6> 的寬度後也還在 .faqform 的極限內,版型就正常了。

第三個圖版型正常的原因,也是因為前面的元素加了 block,而且整個 .form 加上左邊 <h4> 的寬度後還在 .faqform 的極限內。

此外,盒模型的概念也是很重要,子元素要注意寬度加起來是否會超過包住它的父層, 不然一旦內容寬度超過就一定會跑版了。