一个浮子在另一个浮子上

Question

All li's are float:left; And 4th li has climbed on the 1st li.

I want the 4th li to be on it's own and not affect the 1st li.

Here's the result http://jsfiddle.net/TomasRR/s9nQ6/6/embedded/result/

Here's the code http://jsfiddle.net/TomasRR/s9nQ6/6/

<ul>
    <li>
        <div class="front">1</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">2</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">3</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">4</div>
        <div class="back">Back</div>
    </li>
</ul>

li {
    height: 150px;
    width: 400px;       
    list-style: none;       
    background: red;        
    float: left;        
    margin-right: 20px;     
    margin-bottom: 50px;
    margin-top: 10px;               
}
.front, .back {
    width: 100%;
    height: 100%;
}
.front {    
    background: gray;

}
.back {
    background: yellow;
}

Answer 1

It appears that the height value you have set for the li s is smaller than the overall height of your blocks that contain both front and back. When the browser window is made small enough, and the items start to break to a new line, they are going to start 150px down from the last, hence your overlap. You either need to hide the back section or adjust the height of your li s to take the full height of the elements into account. You may also want some space (padding or margin) in between the rows when the break to a new line.