这是困扰我的一段代码，就是设置父容器的height为auto，子容器为100px，照理说，父容器应该也是100，但是最后发现为0？先上两段代码：
以下是第一段：
<style>
.ec-ad {
background: #030303;
margin-left: -10px;
padding-top: 5px;
padding-bottom: 12px;
}
.ec-ad .ec-row-title .ec-title {
font: normal 14px/34px 'Microsoft YaHei';
padding-left: 10px;
color: #666;
}
.ec-ad .ec-img-list {
font-size: 0;
}
.ec-ad .ec-img-list .ec-img-item {
width: 83px;
display: inline-block;
font-size: 12px;
margin-left: 10px;
vertical-align: top;
}
.ec-ad .ec-img {
vertical-align: top;
}
.ec-ad .ec-img-desc {
margin-top: 7px;
text-align: center;
color: #2d64b3;
display: block;
font-size: 12px;
line-height: 18px;
}
</style>
</head>
<body>
<div class="ec-ad">
<div class="ec-row-title">
<h3 class="ec-title">相关搜索
</h3>
</div>
<div class="ec-row-desc">
<div class="ec-img-list">
<a href="https://www.baidu.com/s?wd=%CA%D6%C9%CF%B3%A4%D1%AA%B9%DC%C1%F6%B5%C4%CD%BC%C6%AC&tn=SE_pczhidaotuwenqb_bvf4ih05&lqsource=2&dmaseid=dmaseid0&qid=fb0e23c12f2e1212" class="ec-img-item" target="_blank">
<img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/dmas/pic/item/eeb1cb1349540923b6a29aeb9a58d109b2de4958.jpg" class="ec-img" width="83" height="83" alt="">
<span class="ec-img-desc">手上长血管瘤的图片</span>
</a>
<a href="https://www.baidu.com/s?wd=%D6%CC%B4%AF%BF%AA%B5%B6%BA%F3%CD%BC%C6%AC&tn=SE_pczhidaotuwenqb_bvf4ih05&lqsource=2&dmaseid=dmaseid0&qid=fb0e23c12f2e1212" class="ec-img-item" target="_blank">
<img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/dmas/pic/item/b639b6003af33a87c9fde68fce5c10385243b597.jpg" class="ec-img" width="83" height="83" alt="">
<span class="ec-img-desc">痔疮开刀后图片</span>
</a>
<a href="https://www.baidu.com/s?wd=%D6%CC%B4%AF%CD%BC%C6%AC%BD%CF%C7%E1&tn=SE_pczhidaotuwenqb_bvf4ih05&lqsource=2&dmaseid=dmaseid0&qid=fb0e23c12f2e1212" class="ec-img-item" target="_blank">
<img src="https://gss0.baidu.com/7LsWdDW5_xN3otqbppnN2DJv/dmas/pic/item/18cb0a46f21fbe097a063c8163600c338644adcf.jpg" class="ec-img" width="83" height="83" alt="">
<span class="ec-img-desc">痔疮图片较轻</span>
</a>
</div>
</div>
</div>
</div>
以下是第二段：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<style>
html {
font-size: 0.625rem;
}
* {
padding: 0;
margin: 0;
}
.section_comments {
border-top: 1px solid #EEEEEE;
background: #0000000;
margin: 10px;
}
.section_comments img {
width: 48px;
border-radius: 50%;
height: 48px;
}
.section_comments .div_comments {
padding: 10px 10px 0px 10px;
float: left;
}
.section_comments .div_comments_text {
margin-top: 10px;
font-size: 1.4rem;
}
.section_comments .div_comments_text div:nth-child(2) {
color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<section class="section_comments">
<div class="div_comments">
<img src="i/app-icon72x72@2x.png">
</div>
<div class="div_comments_text">
<div>
宏略信息科技有限公司
</div>
<div>2017-01-01 01:01:01</div>
</div>
</section>
</body>
</html>
大家可以去试试看效果，然后发现第二个的背景色虽然设置为黑色，但是全程是白色，调试后发现是height为0
原因其实很简单，就是因为浮动，所以我们应该清除浮动，怎么清除， 就交给大家自己了
1383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
