- 使用空的<table>标签可以隔离父子元素的外边距，阻止外边距的重叠（直接添加会产生 无用标签，要在CSS中添加属性）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .box1{ 8 height: 300px; 9 width: 200px; 10 background-color: coral; 11 } 12 .box2{ 13 height: 200px; 14 width: 200px; 15 background-color: greenyellow; 16 margin-top: 30px; 17 } 18 .box1:before{ 19 content: ""; 20 display: table; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box1"> 26 <div class="box2"> 27 28 </div> 29 </div> 30 31 </body> 32 </html>
- 解决父元素高度塌陷，进行清除float
方法一：在需要清除浮动的地方加个div.chear或者br.clear【不推荐】因为一旦加入元素就会改变html的结构。
.clear{
clear: both;
height: 0;
overflow: hidden;
}
方法二：在浮动的父元素上添加class=“ （box3) clearfix”
.clearfix:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*+height: 1%;
}
此方法也有弊端，改变CSS中的写法即可
.demo:after,.demo2:after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.demo,.demo2{
*+height: 1%;
}
方法三:
.clearfix:after{
overflow: hidden;
zoom: 1;
}
方法四：
.clearfix:after{
overflow: auto;
zoom: 1;
}
参考来源：
http://www.daqianduan.com/3606.html
http://www.iyunlu.com/view/css-xhtml/55.html