用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时，该属性应用于不想环绕浮动元素的的元素，对于另外两种方法，有关样式则应用于浮动元素的容器或元素本身。