<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow及父级边框塌陷问题</title>
<!-- 解决父级边框塌陷的问题：
1、增加父级元素的高度
2、增加一个空的div标签，清除浮动
3、overflow，在父级元素中增加一个overflow:hidden;
4、父类添加一个伪类：after
-->
<style>
div{
margin: 10px;
padding: 5px;
}
#father:after{
content: '';
display: block;
clear: both;
}
#father{
border: 3px solid #000 ;
/* overflow: hidden; */
}
.layer01{
border: 1px dashed #c71414 ;
display: block;
float: left;
}
.layer02{
border: 1px dashed #148ec7 ;
display: block;
float: left;
}
.layer03{
border: 1px dashed #35d64d ;
display: block;
float: right;
}
/*
clear：right；右侧不允许有浮动元素
clear：left；左侧不容许有浮动元素
clear：both；两侧不允许有浮动元素
*/
.layer04{
border: 1px dashed #c0c539 ;
font-size: 12px;
line-height: 23px;
display: block;
float: right;
}
/* .clear{
clear: both;
margin: 0;
padding: 0;
} */
#content{
width: 200px;
height: 150px;
/* 下拉框 */
overflow: scroll;
}
</style>
</head>
<body>
<div id="father">
<div class="layer01"><img src="../resource/image/bk.png" alt=""></div>
<div class="layer02"><img src="../resource/image/face.jpg" alt=""></div>
<div class="layer03"><img src="../resource/image/favicon.ico" alt=""></div>
<div class="layer04">浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。</div>
<!-- <div class="clear"></div> -->
</div>
<div id="content">
<img src="../resource/image/face.jpg" alt="">
<p>指一个人发出的笑声，高兴开心欢乐时的状态，抒发快乐的心情，表现一个人很开心快乐的状态。也指人通常用来开玩笑。</p>
</div>
</body>
</html>
<!--
总结：
1、浮动元素后面增加空div
简单，代码中尽量避免空div
2、设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3、overflow
简单，下拉的一些场景避免使用
4、父类添加一个伪类：after（推荐使用）
写法稍微复杂一点，但是没有副作用，推荐使用
-->
扫一扫
140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
