用css3進行布局2

• 盒模型
• 設定元素的高度和寬度
• 使元素浮動
• 控制元素浮動的位置

  盒模型

  每個元素都有四個決定其大小的屬性：内容，内邊距，邊框，外邊距，可以單獨控制每個屬性。

  

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在内邊距和内容外的邊框。
• Padding(内邊距) - 清除内容周圍的區域，内邊距是透明的。
• Content(内容) - 盒子的内容，顯示文本和圖像。

  設定元素的寬度和高度

  行内元素設定display:block;或display:inline-block;再對它們設定寬度或高度。

  1，設定元素高度和寬度的步驟

  width:a(可以表示為長度且帶機關或父元素的百分數或使用auto讓浏覽器計算高度)；

  height：b(可以表示為長度且帶機關或使用auto讓浏覽器計算高度);

  max-width屬性非常合适為流式布局設定外圍限制；

  max-width， min-width， max-heigh， min-height屬性在IE6上不支援。

  2，寬度，外邊距和auto

  浮動元素的auto寬度為0，非浮動的行内元素會完全忽略width屬性；

  如果width是auto，它的值就是由包含塊的寬度減去元素自身的内外邊距和邊框計算出來的，如果width是手動設定的，則可能會存在空白。

  使元素浮動

  讓文本環繞元素

  float:left(right;none)

  在使用float：left時，頁面的其他部分圍繞在右邊，反之亦然

  對于某些元素，如果不顯示的設定寬度，他們将無法正确的浮動；

  float屬性不是繼承的。

  控制元素浮動的位置

  可以控制元素能夠浮動在哪些元素的旁邊，以及不能浮動在哪些元素的旁邊，要阻止元素浮動在不合适的元素旁邊，可以使用clear屬性。

• clear方法

  clear:left;(阻止元素浮動在該元素的左邊)

  right;（阻止元素浮動在該元素的右邊）

  both;(阻止元素浮動在該元素的左右兩邊)

  none;（允許元素浮動在該元素的左右兩邊）

  應該将clear屬性添加到不希望環繞浮動對象的元素上，是以，如果要讓一個元素在右側沒有浮動元素之後才顯示，就為它添加clear:right;(而不是為浮動的元素添加此樣式規則)

  清除float的其他方法

• overflow方法

• clearfix方法

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:;}
           

将上面代碼複制到樣式表，再為包含float的元素添加class=”clearfix”

使用clear時，該屬性應用于不想環繞浮動元素的的元素，對于另外兩種方法，有關樣式則應用于浮動元素的容器或元素本身。