html基础整理（02浮动 问题）

margin的塌陷现象及解决方案

   如果一个大盒子中包含一个小盒子,给小盒子设置margin-top,大盒子会一起向下平移

- 解决方案: 
1. 给大盒子加一个边框（border） 
2. 给大盒子设置`overflow:hiden;` 
3. 设置小盒子浮动

 

 

浮动

float: left; //左浮动 
float: right; //右浮动 
- 浮动后的元素层级比标准流高 
- 浮动后的元素显示模式会变成行内块

 

清除浮动

 

浮动的影响:大盒子不设置高度,而且大盒子中的子盒子全部浮动，则大盒子的高度将不会被撑开 
清除浮动: 
1. 额外标签法:在浮动的元素后面加一个div,给这个div设置clear:both; 
        - 内部标签法:可以撑开父盒子的高度 
        - 外部标签法:不能撑开父盒子的高度

 2. 给大盒子设置overflow: hidden; - 缺点:超出大盒子范围的内容会被裁剪
 3. 伪元素清除浮动 
 .clearfix:after { 
    content:""; 
    height: 0;
    line-height: 0; 
    display: block;
    visiblity: hidden;
    clear: both; }

   .clearfix { zoom: 1;/*兼容ie6*/ }

 

 

 

css清除公共样式

/*css初始化*/
 /* 清除标签的默认margin padding*/
 html,body,ul,li,dl,dt,dd,h1,h2,h3,p,img,input { margin: 0; padding: 0; } 

/*清除img的边框*/
 img { border: 0; } 

/*清除li标签前的小点*/
 li { list-style: none; } 

/*设置页面统一文字字体和颜色*/
 body { font-size: 12px; color: #434343; font-family: "宋体";  }

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

/*a标签设置*/ a { color: #434343; text-decoration: none;/*去下划线*/ } 

a:hover { color: green; } 

/*左浮动*/
 .fl { float: left; } 

/*右浮动*/ 
.fr { float: right; }