html - 自动清除最后一个类型的 float

Question

我正在尝试使用 float 创建一个简单的网格。但是，我想在最后一个 div 之后自动清除它们。

http://jsfiddle.net/62mfJ/2/

.col50 {
    float: left;
    width: 50%;
    background-color: grey;
    font-size: 150%;
}

img {
    max-width: 100%;
}

.col:last-of-type:after { // this does not work!
    content:'';
    display:block;
    clear: both;
}

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit dolores autem provident ea explicabo amet sequi tempora ducimus vitae fugit. Iure blanditiis magni possimus aperiam consectetur architecto laboriosam veniam perspiciatis.</p>
<div class="col50">
    <img src="http://placehold.it/350x150">
</div>
<div class="col50">
    <img src="http://placehold.it/350x150">
</div>
<div class="col50">
    <img src="http://placehold.it/350x250">
</div>
<div class="col50">
    <img src="http://placehold.it/350x100">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa commodi at ullam quae necessitatibus assumenda architecto veritatis aspernatur blanditiis amet ipsum velit totam provident earum adipisci ad corporis odio alias.</p>

出于某种原因，这不起作用:

.col:last-of-type:after { 
    content:'';
    display:block;
    clear: both;
}

Answer 1

您可以在所有列周围放置一个包装器并设置 overflow: auto; 样式。这将强制浏览器使包装高度与内部的 float 匹配并保持流动。

这是一个更新的 fiddle 说明。

http://jsfiddle.net/62mfJ/3/