<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#parent{
width: 600px;
/* height: 600px; */
background-color: red;
margin: 0 auto;
/* overflow: hidden; */
}
#box,
#pox{
width: 200px;
height: 200px;
}
#box{
background-color: green;
float: left;
}
#pox{
background-color: blue;
float: right;
}
.miss{
height: 200px;
background-color: black;
}
/* 相当于overfloat:hidden */
.clear{
height: 0;
opacity: 0;/*设置透明度*/
line-height: 0;
display: block;
clear: both;
}
</style>
</head>
<body>
<!--
清除浮动带来的影响：
clear:left (清除左浮动带来的影响)
right(清除有浮动带来的影响)
both(清除两边浮动带来的影响)
-->
<div id="parent">
<div id="box"></div>
<div id="pox"></div>
<!-- 需要另外添加一个盒子写样式，clear:both 了解即可 -->
<!-- <div style="clear: both;"></div> -->
<div class="clear"></div>
</div>
<div class="miss">我是miss这个盒子啊</div>
</body>
</html>