CSS盒模型和浮动

    盒模型中的margin和padding如果值为百分比，则结果为相对于元素内容宽度的百分比。如下图中的margin-top和padding-top都设置为5%。

    默认情况下，盒子的背景(由background-image和background-color也就是背景图片和背景颜色)会扩展到border边界上来。可使用background-clip来约束它们的范围。取值有：border-box（默认），padding-box和content-box。

    outline轮廓，这玩意看起来像边界但又不属于盒模型里的东西。它并不影响元素的总宽度，准确点来说它处于border边界之外又处于外边距margin之内。

    通过限制一个宽度范围，设置百分比宽度可实现一个响应式的布局。

 #box{
    min-width: 500px;
    max-width: 1280px;
    margin: 0 auto;
    width:70%;
  }

max-width还有一个很重要的作用是实现相应式的图片。将图片的wax-width设为100%，当父容器的宽度小于图片宽度时，图片也会跟着一起缩小而不会溢出。这种方式有很好的浏览器兼容性，IE7都支持。

2.浮动

    清除浮动在布局中很常用。清除浮动通常有两种常用方法：触发BFC或使用伪元素。

---

有关BFC的知识：

    BFC是block format content的简称。在CSS中叫做Flow Root，是一个独立的布局环境。以下条件会触发BFC：

1.float除了none以外的任何值。

2.overflow除了visible以外的值(hidden,auto,scroll)。

3.display(table-cell, table-caption, inline-block)。

4.position(absolute, fixed).

    BFC的特性：

1.创建了BFC的元素中，子浮动元素也会参与高度计算。

2.与浮动元素相邻的、创建了BFC的元素，都不能与浮动元素互相覆盖。

3.创建了BFC的元素不会与它们的子元素margin重叠。

注意：给body中添加overflow:hidden是触发不了BFC的，也就是说在body中将一个子元素浮动后，无法通过触发BFC来让body包含浮动元素。这就是为什么要创建一个wrapper的div后再在里面布局的原因。

---

 在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；

在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。