css布局问题

1、清除浮动（兼容IE6，IE7等）

.clearfix:after{
    content: "020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;  
}
.clearfix {
    /* 触发 hasLayout */ 
    zoom: 1; 
}
.box {
    width: 800px;
    height: 400px;
    background: red;
    border: 1px solid red;
}
.left {
    width: 200px;
    height: 100px;
    background: blue;
}
.right {
    width: 200px;
    height: 100px;
    background: green;
}

<div class="box clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>

2、解决IE6下<a>标签变块元素后无法换行问题

display:block;
 _display:inline-block;

3、内部<div>设置margin-top影响外部<div>margin-top问题

.father {
    width: 400px;
    height: 200px;
    background: red;
}
.son {
    width: 200px;
    height: 100px;
    margin-top: 20px;
    background: blue;
}

<div class="father">
    <div class="son"></div>
</div>

    此时father也会有margin-top:20px的属性，只要给它加上 overflow:hidden; 就能清除了。