內嵌塊和追加<div class="clear"></div>有什麼區別？

我想將多個div放入一個容器div中，並將它們排列起來，使容器看起來像它內部有列。內嵌塊和追加<div class="clear"></div>有什麼區別？

<div> 
    <div id="col_1"></div> 
    <div id="col_2"></div> 
</div>

我可以選擇這些div是inline-block或使它們float:left具有特定寬度和空div追加到最後它的CSS樣式是clear:both。

兩者都顯得很好，但我該怎麼做？

來源

2014-02-19 igonejack

可能的重複[float：left; vs display：inline; vs display：inline-block; vs display：table-cell;]（http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell） – Vucko

總之，如果您的頁面需要在舊瀏覽器（小於IE8）上運行，請考慮float方法。

如果您與無關，則使用display：inline-block（或任何其他新的顯示屬性）。它更乾淨（因爲您不需要HTML元素來恢復浮動）並且更簡單。

來源

2014-02-19 17:07:35 enguerranws

*小於IE 8，不包括IE 8 （它的工作原理） – Itay

是的，這就是爲什麼我說「不到IE8」 – enguerranws

只是想明確，因爲我有困惑了一秒 – Itay

這是個人的選擇。

當使用float時，您必須清除它們，就像您說的，您可以添加清除div或使容器與overflow: auto;一起使用。

當使用inline-block時，應該記住您應該將font-size: 0添加到父div以刪除div之間的間距並將默認字體大小添加到div。（有負的利潤率修正，但我個人不喜歡）

如果您希望col1在左邊，col2在右邊，最好使用浮動（左/右）。

如果您想讓cols在中間/底部豎直對齊，最好使用inline-block。

但對於大多數其他情況是個人選擇。

來源

2014-02-19 17:08:36 drip

內嵌塊和追加<div class="clear"></div>有什麼區別？

回答

相關問題