盒子的嵌套布局

前情回顾

上下布局

• 盒子的居中，在现在网页设计技术中，我们总是通过设置盒子的水平方向的边距来实现。
• 具体方案为：margin:值1 auto;
• 
• 使用这种方案设置盒子居中时，页面必须要设置为xhtml标准的，否则将不起作用

左右布局

•   
• 盒子的height属性要设置为auto，否则会导致盒子的高度过分的死板，不能随浏览器的大小而自动调整。

盒子的嵌套布局

什么是盒子的嵌套

• 先在网页中进行大框架的布局，然后将每个分块再划分为更小的分支。
• 

盒子的高度塌陷

• 盒子的高度塌陷需要满足的条件有两个：

 第一，盒子的高度被设置为auto；
 第二，盒子中所有子元素都是浮动的。

• 盒子的高度塌陷问题需要使用清除浮动的样式属性clear来解决。

 第一步，在样式中定义.clear{clear:both;}，选择符的名称可以改变，类型也可以是id选择符，样式属性clear的取值可以根据实际情况使用left或者right。

 第二步，在作为父元素的盒子内部最下方增加一个空白盒子，引用定义的class类选择符clear即可。