<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用overflow来hidden隐藏多余margin或元素</title>
<style type="text/css">
.pic_list_con{
width: 958px;
border: 1px solid #666;
margin: 50px auto 0;
}
.pic_list_title{
width: 918px;
height: 50px;
/*background: gold;*/
margin: 0 auto;
/*此处设置了之后图片应该在父集边框紧贴边缘,不过出现问题,没有能够紧贴.
这个时候首先要查找问题在哪个元素.
主要看自己子元素内是否有自带式样的元素.
此处经过排查, 发现是h3自带式样,引起了top塌陷,所以导致title的div无法紧贴上方父元素.
所以第一时间应该更改h3的默认margin!
*/
}
.pic_list_title h3{
margin:0;
/*设置margin之后,父元素也能够紧贴上级元素了!*/
font: 18px/50px "Microsoft Yahei";
border-bottom: 2px solid red ;
/*此处设置了下border之后,发现h3的元素是一个块元素,border覆盖整行
那么需要转元素:使用display或者是float;
在此处,displayd的inlineblock 和 float所形成的效果是一样的
不过在行内有多个行内块元素的时候,inlineblock则会有块间间隙,需要通过margin负值来消除.float则不会.
所以通常来讲使用float会比较方便一点.
*/
/*display: inline-block;*/
float: left;
/* 且此处文字与元素块并不是同一位置,所以要设置, 让文字在元素块偏后
可以通过indent设置或者padding-left. 所能达到的效果在此处一模一样.
*/
text-indent: 10px;
/*padding-left: 20px;*/
/*background: gold;*/
}
.pic_wrap{
width: 918px;
margin: 20px auto 13px;
/*background: cyan;*/
overflow: hidden;
}
.pic_list{
list-style: none;
width: 950px;
padding: 0;
margin: 0px;
/*background-color: gold;*/
/*overflow: hidden;*/
}
.pic_list li{
width: 160px;
height:68px;
margin: 0;
float: left;
/*此时设置块元素的时候会导致,底栏塌陷,清除浮动*/
/*clearfix可以使用.
但在此处,使用overflow更为方便.因为overflow的hidden缺陷在于会隐藏定位元素, 而此时没有定位元素.
所以在父集设置overflow
*/
margin: 0 29px 25px 0px;
/*到此处,发现图片无法单行存在5个,因为有margin存在,于是在父集上又添加一个div元素,wrap.
解决图片margin排版问题思路:
1.在父集外面创建一个上级元素
2.放大父集,使其能够容纳下足够的图片单位,不至于因为每行最后一个图片的右边margin值影响排列.
3.在父集的上级设置overflow,hidden.隐藏多余元素.
*/
}
</style>
</head>
<body>
<div class="pic_list_con">
<div class="pic_list_title">
<h3>图片列表</h3>
</div>
<!-- sublime -->
<!-- div.pic_wrap>ul.pic_list>(li>a[href="#"]>img[src="images/goods.jpg" alt="商品图片"])*10 -->
<!-- sublime中, 创建元素的时候可以通过
{} 大括号添加元素内容
[] 中括号添加属性内容, 例如 src, alt 等等
() 用来框住批量创建时候的语法.
$ 美元符号可以让其自动生成顺序常数.
-->
<div class="pic_wrap">
<ul class="pic_list">
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
<li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li>
</ul>
</div>
</div>
</body>
</html>
来源：https://www.cnblogs.com/jrri/p/11346812.html