代码示例
<body>
<div id="father">
<div class="layer01"><img src="img/1.jpg" alt=""></div>
<div class="layer02"><img src="img/2.jpg" alt=""></div>
<div class="layer03"><img src="img/3.jpg" alt=""></div>
<div class="layer04">
</div>
</div>
</body>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: left;
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: left;
}
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
float: left;
clear: both;
}
解决方式
1.给父元素设置高度
#father{
border: 1px #000 solid;
height: 500px;
}
这种方式是最简单的方式，但是元素固定高度会降低元素的可扩展
2.添加一个空的div
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
这种方式简单，但是会造成代码冗余
3.给父级元素添加overflow属性
overflow: hidden; //溢出时，隐藏;边框大小根据内容适应
这种方式简单，但是有些场景下是不可以使用的，比如：有下拉菜单的时候。
扩展：overflow常见值
/*默认值，内容不会被修剪，会呈现在盒子之外*/
overflow:visible
/*内容会被修剪，并且其余内容是不可见的*/
overflow:hidden
/*内容会被修剪，但是浏览器会显示滚动条以便查看其余内容*/
overflow:scroll
/*如果内容被修剪，则浏览器会显示滚动条以便查看其余内容*/
overflow:auto
4.给父级添加伪类after
#father:after{
content: '';/*添加空内容*/
display: block;/*把添加的内容转换为块级元素*/
clear: both;/*清除这个元素两侧的浮动*/
}
写法稍微复杂，但是没有副作用，推荐使用
注意：IE6、IE7下还需要添加一句代码才能清除浮动.clear{zoom:1}。这句代码兼容IE6、IE7浏览器