列未环绕浮动元素

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> 

Why does column three not wrap around like this:

There is enough space for it on the right of the floated elements.

Answer 1

Add width: 100% to the .column:last-child.

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

Answer 2

The answer why this happens is pretty much the answer from this

Here's a fiddle demonstrating that the 3rd column is below the floated columns, and it's text content is simply wrapping around (below in this case) the floated column.

(simply made some backgrounds translucent)

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

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