html&css--------布局（11/6）

css中控制页面布局的定位机制：普通流、相对定位、绝对定位

普通流（position：static）

相对定位（position：relative）

绝对定位（position：absolute）

固定定位（position：fixed）

重叠元素（z-index）：控制元素的层次，数值越大，元素的层次就越靠前，z轴上彼此堆叠，置于顶层或置于底层

浮动元素（float）

清除浮动（clear）：表明一个盒子的左侧或者右侧不允许出现浮动元素

left：左侧不能接触同一个包含元素内的其他任何元素

right：右侧不能接触同一个包含元素内的其他任何元素

both：两侧都不能接触同一个包含元素内的其他任何元素

none：两侧都可以接触元素

问题：如果一个包含元素只包含了一个浮动元素，有些浏览器就会将它的高度看成0像素

解决方案：将overflow设置为auto，将width设置为100%

利用浮动创建多列式布局(width、float、margin)

.column1of2{

float:left;

width:620px;

margin:10px;}

.column2of2{

float:left;

width:300px;

margin:10px;}