<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>完善clearfix
<style type="text/css">
.box1{
width:300px;
height:300px;
background-color:#bfa;
/*padding-top: 1px; */ /*顶部隔离box1和box2*/
}
.box2{
width:200px;
height:200px;
background-color:yellow;
margin-top:100px;
}
.box3{
border:10px red solid;
}
.box4{
width:100px;
height:100px;
background-color:blue;
float:left;
/* 形成塌陷*/
}
/*!*解决父子元素外边距重叠*!*/
/*.box1:before{*/
/* content:'';*/
/* display:table;*/
/*!* 将元素设置成表格*!*/
/*}*/
/*!*解决父元素高度塌陷*!*/
/*.clearfix:after{*/
/* content: '';*/
/* display: block;*/
/* clear:both ;*/
/*}*/
/*简写*/
.clearfix:before,.clearfix:after{
content:'';
display:table;
clear:both;
}
.claerfix{
zoom:1;
}
/*!*解决父元素高度塌陷*!*/
/*!*解决父子元素外边距重叠*!*/
<div class="box3" clearfix>
<div class="box4">
<div class="box1" clearfix>
<div class="box2">
空的div不能隔离父子元素的外边距
空的table可以隔离 但是会增加多余代码 没必要
也可以通过改变css样式display:table;
-->
