代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解决父级元素塌陷的问题</title>
<link rel="stylesheet" href="../css/020.css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="../../image/1.jpg" alt=""></div>
<div class="layer02"><img src="../../image/1.jpg" alt=""></div>
<div class="layer03"><img src="../../image/1.jpg" alt=""></div>
<div class="layer04"><span>浮动可以向左也可以向右</span></div>
<!-- <div class="clear"></div> -->
</div>
</body>
</html>
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
/* height:500px; 1、增加父级元素的高度~*/
/* overflow: hidden; */
}
#father::after{
content: '';
display: block;
clear: both;
}
.layer01 {
border: 1px #F000 dashed;
display: inline-block;
float: left;
}
.layer02 {
border: 1px #000F dashed;
display: inline-block;
float: left;
}
.layer03 {
border: 1px dashed #060;
display: inline-block;
float: left;
}
/*
clear: right; 右侧不允许有浮动的元素
clear: left; 左侧不允许有浮动的元素
clear: both; 两侧不允许有浮动的元素
clear: none;
*/
.layer04 {
border: 1px dashed #666;
font-size: 12px;
line-height: 23px;
/*设置以百分比计的行高：*/
display: inline-block;
float: left;
clear: both;/*清除浮动，让元素既有浮动的效果又有块元素的效果 */
}
/* .clear{
clear: both;
margin: 0;
padding: 0;
}
2、增加一个空的div标签，清除浮动
*/
/*父级边框塌陷问题
1、增加父级元素的高度~
2、增加一个空的div标签，清除浮动
3、overflow
*/
运行结果：
