1:直接在外边框中把height属性值调大
2:在外边框的尾部加一个div标签,style设置成clear:both;
3:在外边框中加一个属性overflow:hidden。
4:使用结构伪类选择器:外边框:after,然后设置content:"",
display:block;
clear:both;
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px dashed red;
/*第一种清除外边框塌陷的方式*/
/*height: 500px;*/
/*第三种解决外边框塌陷的方式*/
/*overflow: hidden;*/
}
#im1{
/*一块*/
display: inline-block;
float: left;
}
#im2{
display: inline-block;
/*设置浮动样式*/
float:left;
/*按标准网页的格式浮动,即浮动在下面一行,both表示左右都是,也可以单独设置一边
它的这一排都没有浮动元素。它会放到浮动元素的下面一行
*/
clear: both;
}
#im3{
display: inline-block;
float: right;
}
/*第四种清除外边框塌陷的方式*/
#father:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="father">
<div id="im1"><img src="/video/nsn.jpg"></div>
<div id="im2"><img src="/video/海绵宝宝.png"></div>
<div id="im3"><audio src="/video/那就好好告个别吧.m4a" controls> </div>
<!--第二种清除外边框塌陷的方式加一个空的div并且设置成标准文档流-->
<!--<div style="clear: both"></div>-->
</div>
</body>
</html>