CSS 页面布局属性和内外补丁属性
页面布局属性里我最常用的就是 float，overflow，display 和 clear。然后加上 padding 和 margin。
貌似这也是CSS 学习中的一个难点，常常就是因为这些属性用的不好而导致页面错乱不堪。
首先第一个用到的就是 float，浮动，他决定一个层中浏览器中往那边靠，他属于相对定位属性。例如：
<div style="padding: 10px 0; border: red solid 1px;"> <div style="float: left; background: none repeat scroll 0% 0% #cccccc; height: 50px; width: 50%;">float:left;</div> <div style="float: left; background: none repeat scroll 0% 0% #333333; height: 50px; width: 50%;">float:left;</div> </div>
效果：
float:left;
float:left;
我们会发现外面那个红线的层没有被撑开，按道理不设置层的高度，高度上应该自适应增高的，这个地方的原理是因为子层使用了 float 浮动属性，导致父层不能计算出子层的高度，一般这种情况的解决方法有3种，但是在这儿我只列出我最常用的一种就是 clear:both; 清除浮动，像这样
<div style="padding: 10px 0; border: red solid 1px;"> <div style="float: left; background: none repeat scroll 0% 0% #cccccc; height: 50px; width: 50%;">float:left;</div> <div style="float: left; background: none repeat scroll 0% 0% #333333; height: 50px; width: 50%;">float:left;</div> <hr style="margin: 0; clear: both;" /></div>
效果：
float:left;
float:left;
这儿我是在需要清除浮动的层里加了 <hr style=”margin:0; border;0; clear:both;” /> ，实际上用任何HTML 标签都可以实现这个效果。
边框(border)边距(margin)和间隙(padding)属性
边框属性(border)用来设定一个元素的边线。
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)是用来设置元素内容到元素边界的距离。
这三个属性都属于CSS中box类型的属性。
盒模型的3D示意图
