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始终能补充上来，除非空间不够，移到下一行
-->

相关阅读:
linux学习笔记--20150122
破解LR11 sentinel stage failed
Linux部署环境初学（Resin、jdk）
MongoDB操作
 TestNG
在iOS8 下用Swift 创建自定义的键盘
 iOS 8下简单，可交互式的通知
 设计模式：策略模式
 用Swift创建一个自定义，可调整的控件
 iOS7状态栏上有趣的渐变遮罩
原文地址：https://www.cnblogs.com/dreamhome/p/2115605.html

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

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