关于float的浮动无法撑起宽高问题

关于float的浮动无法撑起父级元素宽高的问题

项目开发过程常常遇到一个问题，在使用float之后，会发现父级元素的宽高无法撑起，写一段代码来尝试一下

<div class="main">
		<ul>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
			<li>列表6</li>
		</ul>
	</div>

这一段是代码html的结构，下面加上css的样式

<style>
		img {
			width:200px;
			height:200px;
		}
		.main {
			border:1px solid #333;
		}
		ul {
			list-style:none;
		}
	</style>

诊断代码运行后得到的效果：
而我们想要的是列表横向排列，为li元素加上浮动效果,

li {
	float:left;
	border:1px solid #333;
}

此时我们会发现外层的div宽高并没有被撑开，会出现如下效果: