HTML&CSS基础-完善clearfix
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.抛出问题
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>完善clearfix</title> <style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: red;
} .box2{
width: 300px;
height: 200px;
background-color: yellow;
/**
* 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。
* 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。
*/
margin-top: 100px;
} </style>
</head>
<body> <div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
二.使用空table解决问题
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>完善clearfix</title> <style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: red;
} .box1:before{
content: "";
/*将一个元素设置为表格显示*/
display: table;
} .box2{
width: 300px;
height: 200px;
background-color: yellow;
/**
* 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。
* 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。
*/
margin-top: 100px;
} </style>
</head>
<body> <div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
2>.浏览器打开以上代码渲染结果
三.完善clearfix的最终版本
1>.HTML源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>完善clearfix</title> <style type="text/css">
.box1{
width: 300px;
height: 300px;
background-color: red;
} .box2{
width: 300px;
height: 200px;
background-color: yellow;
/**
* 子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素。
* 使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠。
*/
margin-top: 100px;
} .box3{
border: 10px blue solid;
} .box4{
width: 100px;
height: 100px;
background-color: deeppink;
float: left;
} /**
* 解决父子元素的外边距重叠
*
* .box1:before{
* content: "";
* 将一个元素设置为表格显示
* display: table;
* } /**
* 解决父元素高度塌陷
*
* .clearfix:after{
* content: "";
* display: block;
* display: table;
* clear: both;
* }
*
/ /**
* 经过修改后的clearfix是一个多功能的，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
*/
.clearfix:after, .clearfix:before{
content: "";
display: table;
clear: both;
}
/*兼容IE6*/
.clearfix{
zoom: 1;
} </style>
</head>
<body> <div class="box3 clearfix">
<div class="box4"></div>
</div> <div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
2>.浏览器打开以上代码渲染结果