Mastering CSS

Solving the problems of floats

Okay, so let's look at our problem. You've learned how to change stacked rows into horizontal columns in order to achieve a multicolumn layout, but our containing element around our floated elements has totally collapsed and lost its height because all the elements inside it are floated. As a collapsed element, it doesn't look like it's responding to the margin-bottom property or the background-color we've assigned to it. So, in this section, we'll look at four separate methods to fix this collapse, and we'll try to understand the best way to deal with it. First, we'll use the clear method, followed by the overflow: hidden method, followed by the float method, and then finally the most preferred method: the ...