浮动元素后面加空div
在浮动元素后加div,设置该div的clear属性值为both(清楚前面浮动的元素对该div的影响)
<html>
<head>
<style>
/*其他元素浮动此处省略*/
.clear{ clear: both; margin: 0; padding: 0;}
</style>
</head>
<body>
<div id="father">
<div><img src="1.jpg"/></div>
<div><img src="2.jpg"/></div>
<div><img src="3.jpg"/></div>
<div>浮动的盒子</div>
<div class="clear"></div>
</body>
</html>此种方式简单，但空div会造成HTML代码冗余
设置父元素的高度
/*此处针对上面的代码给最后一个子元素样式*/
#father {height: 600px; border:1px #000 solid; }此种方式简单，但元素高度固定会降低扩展性
父级添加overflow属性
/*此处针对上面的代码给最后一个子元素样式*/
#father {overflow: hidden;border:1px #000 solid; }此种方式简单，但下拉列表框的场景不能用
父级添加伪类after
/*此处针对上面的代码给最后一个子元素样式*/
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}此种方式稍微复杂，是直接通过css给父级div里的最后位置添加一个子元素(块元素)，不造成任何副作用，推荐使用这种!!!
5733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
