4. CSS-浮动 清除浮动 初始化 overflow

1. 标准流    

元素在浏览器中默认的显示方式

2. 浮动  

      特点: 1   元素脱标 不占位置   2.设置了浮动元素可以在一行上显示   3.浮动可以进行模式转换 (行内块元素)

      作用 :  1. 制作网页导航     2.实现图片文字环绕    3.实现网页布局

float: left  |  right

3. 清除浮动

使用条件: 网页布局中 父容易没有设置高度   父容器中的所有子元素都设置了浮动  

 3.1  voerflow: hidden  (父元素中超出部分的元素隐藏)

 3.2 clear:    left | right | both

 3.3  使用双伪元素   .clearfix:after,.clearfix:before { content:"";height:0 ; display:block: clear:both

; visibiltiy:hidden;}  

.clearfix{ *zoom:1} ;

4. 样式初始化

/* CSS样式初始化 */

body, ul, ol, dl, li, dt, dd, p, h1, h2, h3, h4, h5, h6, table { margin: 0; padding: 0; font-size: 12px; font-family: 宋体; list-style: none; color: black;}

a { color: green; text-decoration: none;}

a:hover { text-decoration: underline; color: pink;}

img, input { border: 0 none; outline-style: none; margin: 0; padding: 0;}

/* 版心 */    .w { width: 980px; margin: 0 auto;}

/* 清除浮动 */  .clearfix:after { content: ""; height: 0; line-height: 0; display: block; clear: both; visibility: hidden;}

                       .clearfix { zoom: 1;}

5. voerflow 使用