CSS3--浮动-dispalay-float-解决父级塌陷的四种方法

1.网页布局
常见的网页布局：网站基本都包括网站导航、网页主体内容、网站版权三个部分；网站版权一般由网站声明和一些相关链接组成
标准文档流:指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

2.display属性
标准文档流有两种元素：一种以div标签为代表的块级元素，另一种为以span标签为代表的行内元素
display属性的使用：
值 说明
block 块级元素默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 行内元素默认值，元素会被显示为行内元素，该元素前后没有换行符
inline-block 行内块元素，元素既具有行内元素的特性，也具有块元素的特性
none 设置元素不会被显示

3.浮动
float属性
（1）left：左浮动
（2）right：右浮动
（3）none：默认值，元素不浮动，并会显示在其文本中出现的位置
4.清除浮动
 消除浮动元素对其他元素的影响
 clear属性
（1）left：在左侧不允许浮动
（2）right：在右侧不允许浮动
（3）both：在左、右两侧都不允许浮动元素
（4）none：默认值，允许浮动元素出现在两侧
解决父级边框塌陷的方法（四种）
（1）浮动元素后面加空div，简单，但是会造成代码冗杂
（2）设置父元素的高度，简单，但元素固定高会降低元素可扩展
（3）父级添加overflow属性，简单，但是有下拉列表框的场景不能用
常见值：①visible：默认值，内容不会被修剪，会呈现在盒子之外
②hidden：内容会被修剪，并且其余内容是不可见的
③scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
④auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
（4）父级添加伪类after，写法稍复杂，但没有副作用，推荐使用
关键代码：

.clear:after{
   				 content: '';/*添加空内容*/
    			 display: block;/*把添加的内容转换为块级元素*/
    			 clear: both;/*清除这个元素两侧的浮动*/
}

注：在IE6、IE7下还需要加一句代码才能清除浮动：
.clear{zoom：1;}/*兼容IE6、IE7浏览器*/

5.inline-block和浮动的区别
display：inline-block可以让元素排在一行，并且支持宽和高，代码实行起来方便，添加该属性的元素在标准文档流中不需要清除浮动
inline-block的缺点：位置、方向不可控，会解析空格
float可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float的缺点：浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级元素上添加清除浮动的样式