/*
* 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
* 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
*/
/**
* 解决父子元素的外边距重叠
*/
/*.box1:before{
content: "";*/
/*
* display:table可以将一个元素设置为表格显示
*/
/* display: table;
}
*/
/**
* 解决父元素高度塌陷
*/
/*.clearfix:after{
content: "";
display: block;
clear: both;
}*/
/*
* 经过修改后的clearfix是一个多功能的
* 既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
<body>
<div class="box3 clearfix">
<div class="box4"></div>
</div>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
