[CSS] clear:both sample

  之前在跟同事討論到一個CSS的屬性clear,他有所謂的clear:left, clear:right,跟最常使用的clear:bith.不過其概念是真的蠻模糊的,根據W3C School的說明是

  Elements after the floating element will flow around it. To avoid this, use the clear property.

  The clear property specifies which sides of an element other floating elements are not allowed.
  Add a text line into the image gallery, using the clear property.

  恩~有看沒有懂, 不如拿code當範例說明最快了.

  Float會把所指定的 DOM物件浮出它原來的位置, 所以當一個父 DOM物件下面的物件都設定了 float, 會造成此裡面父物件的認為裡面沒有物件撐開,進而高度縮起來

Check out this Pen!

  此解法有相當多種解法,如多加一個 p tag
  .clear {zoom:1; clear:both;}
  .clear:after {content:''; display:block; clear:both; visibility:hidden; height:0;}

(修正 CSS 對於 float 區塊, 使用 clear:both 無效的解法,有更詳細完整的解法)

  所以clear就是清除掉此物件的左或是右,或是兩邊的Float.直接看sample code會更能了解呈現效果.

Check out this Pen!