一、实验内容
- 浮动是布局中经常采用的手段，但是浮动带来的高度塌陷却为布局带来麻烦，请为下面的布局清除浮动（2种方式以上）
<head>
<title>清除浮动</title>
<style type="text/css">
.papa{
background: lightblue;
}
.child{
background-color: green;
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="papa">
<div class="child"></div>
</div>
</body>
二、实验代码及成品
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.papa{
background: lightblue;
}
.child{
background-color: green;
width: 200px;
height: 200px;
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="papa">
<div class="child"></div>
<div class="clear"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
.papa{
background: lightblue;
overflow:hidden;
}
.child{
background-color: green;
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="papa">
<div class="child"></div>
</div>
</body>
</html>
