浮动和基本的布局

一.浮动

浮动： 脱离文档流，添加浮动的元素脱离普通文档流，将会“飘”在文档之上，并不占文档中的位置，后来的元素将顶替浮动的元素的位置

float:left   right none;

左浮动 右浮动 不浮动；

浮动的运用：

	         运用：可使块元素并行在一行
                  但浮动元素并不会飘出父级元素的内边距，当父级元素有内边距时，浮动元素并不会与父元素的边框对齐，会在除内边距外的地方对齐，
                  即只在盒子内容区域活动！！！！！
                  不能和  display:inline-block 一起来使用
                  因为浮动可以使元素转换为行内块元素显示

清除浮动：因为浮动有时会对布局结构产生影响
解决方法：

 方法：1.clear：both;-------代码中添加一个空元素div，样式为 clear：both；
                         2.给父级元素容器添加: overflow：hidden;
                         3.使用伪元素清除浮动
                                .clearfix:after{      ---------与第一种相似，同样是添加空元素
                                            content:".";
                                            display:block;
                                            clear:both;
                                            height:0;
                                    }

二.基本布局

布局：一列固定宽度且居中;
两列左窄右宽
1.左窄右宽
2、上下布局

3.有排列的布局

布局中，存在 版心
：网页主体内容的区域（可视区域）