CSS浮动及父容器自适应高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
    margin:0 auto;
    font-size:12px;
    font-family:Verdana;
    line-height:1.5;
}

ul{
    padding:0;
    margin:0;
    list-style:none;
}

a {
    color:#05a;
    display:block;
    text-decoration:none;<!--去掉超链接a下划线-->
}

a:hover {
    color:#f00;
}

#layout ul li {
    width:72px;
    float:left;
    margin:20px 0 0px 20px;
    display:inline;
    text-align:center;
}

#layout{
    width:400px;
    border:2px solid #ccc;
    padding:2px;
    overflow:auto;
    zoom:1;
}

#layout ul li a img {
    padding:1px;
    border:1px solid #e1e1e1;
    margin-bottom:3px;
    width:68px;
    height:54px;
}

#layout ul li a:hover img {
    padding:0px;
    border:2px solid #f98510;
}
</style>
</head>
<body>
<div id="layout">
    <ul>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
        <li><a href="#"><img src="picture/pic.jpg"/>三亚</a></li>
    </ul>
</div>
</body>
</html>
<!--如果在前后Div上没有浮动的则该浮动div在这一行在浮动指定的方向（本行最左边，最右边）安放，如果前后有浮动的，则按先后浮动的顺序安放，行内有空格的话换到下一行，如没指定边距，则下一行从头开始
如果一行里全是浮动，没有能占一行的，则下面的div始终能补充上来，除非空间不够，移到下一行
-->

相关阅读:
Coding Souls团队第二阶段冲刺(三)
Coding Souls团队第二阶段冲刺(二)
第一阶段意见评价
 PHPMailer/PHPMailer的使用
 使用jquery.media.js实现pdf在线预览
 select2(前端选择框_框架)
安装Docker CE+阿里云镜像仓库
 docker学习
 前端开发框架WeUI
php _Markdown转HTML
原文地址：https://www.cnblogs.com/dreamhome/p/2115605.html

CSS浮动 及父容器自适应高度

CSS浮动及父容器自适应高度