父级边框塌陷问题
clear
clear : right; 右侧不允许有浮动元素
clear : left; 左侧不允许有浮动元素
clear : both; 两侧不允许有浮动元素
clear : none;
解决方法：
1.增加父级元素的高度
#box{
width: 1500px;
height: 500px;
border: 2px solid red;
}
2.增加一个空的div标签，清除浮动
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3.在父级元素中添加一个overflow
#box{
border: 2px solid red;
/*超出部分 overflow: scroll滚动条 hidden隐藏*/
overflow: hidden;
}
4.父类添加一个伪类after（推荐）
#box:after{
content: '';
display: block;
clear: both;
}
使用空div和伪类after就不要设宽高了
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="../浮动/style.css">
</head>
<body>
<div id="box">
<div>
<img src="../浮动/resources/qqyzml.png" alt="">
</div>
<div>
<img src="../浮动/resources/王一博.jpg" alt="" width="200" height="500">
</div>
<div>
<img src="../浮动/resources/表情包.jpg" alt="">
</div>
<p>
王一博（YiBo），1997年8月5日出生于中国河南省洛阳市。
</p>
<!-- <div class="clear"></div> -->
</div>
</body>
</html>
css：
#box{
border: 2px solid red;
/*超出部分 overflow: scroll滚动条 hidden隐藏*/
/*overflow: hidden;*/
}
#box:after{
content: '';
display: block;
clear: both;
}
div{
border: 2px solid red;
}
div:nth-of-type(1){
display: inline-block;
float: left;
}
div:nth-of-type(2){
display: inline-block;
float: left;
height: 500px;
}
div:nth-of-type(3){
display: inline-block;
float: left;
}
p{
display: inline-block;
border: 2px solid red;
float: left;
/*
clear : right; 右侧不允许有浮动元素
clear : left; 左侧不允许有浮动元素
clear : both; 两侧不允许有浮动元素
clear : none;
*/
/*clear: none;*/
}
/*.clear{
clear: both;
margin: 0;
padding: 0;
}*/