列没有环绕浮动元素

Question

.container {
	background-color: lightgreen;
}

.column {
	width: 31.33%;
	background-color: green;
	float: left;
	margin: 0 1%;
}

.column:last-child {
	float: none;
}

<div class='container'>
    <div class='column'>Column 1</div>
    <div class='column'>Column 2</div>
    <div class='column'>Column 3Column 3Column 3Column 3Column 3Column 3Column 3</div>
</div>

为什么第三列不会像这样包围：

在浮动元素的右侧有足够的空间。

Answer 1

将宽度：100％添加到.column：last-child。

.column:last-child {
    float: none;
  width: 100%;
}

Answer 2

为什么会发生这种情况的答案几乎是来自answer

的this

Here's a fiddle证明第3列位于浮动列的下方，并且它的文本内容只是环绕（在本例中为下方）浮动列。

（简单地使一些背景半透明）

.column {
    width: 31.33%;
    background-color: rgba(0, 255,0, .5);
    float: left;
    margin: 0 1%;
}

.column:last-child {
    float: none;
  background: red;
}