最近我查看了一些网站的代码,发现每个人<div> 都有一个班级clearfix.
经过快速谷歌搜索,我了解到它有时适用于IE6,但实际上是什么是一个clearfix？
与没有clearfix的布局相比,您能提供一些带有clearfix的布局示例吗？
似乎浮动的HTML元素不会扩展其容器的高度.例如,请考虑以下代码:
.portfoliosite {
background: #777;
padding: 10px;
width: 550px;
}
.portfoliothumbnail {
background: red;
margin: 0 10px 10px 0;
float: left;
height: 150px;
width: 150px;
}<div class="portfoliosite">
<div class="portfoliothumbnail"><!-- Img tag goes here --></div>
<p class="portfoliotitle">AwesomeSite.Com</p>
<p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>
</div>注意灰色背景的包含div比红色div短,红色div扩展到容器边界之外.我希望包含元素扩展到其内容的大小,包括浮动元素.
有没有一个优雅的解决方案来实现这一点,最好是一个不涉及设置固定高度或使用JavaScript？