Two columns: rubber and fixed. Float and Clear in the first one?

Question

css

There is a simple two-column layout (fluid site with a fixed menu) and a glued footer. The menu width is in px (percentages are not appropriate). The menu can be above the content.
How can I make float and clear inside the rubber block not affect the layout? Now everything after clear is moved down by the height of the menu.
The fact is that the site is old and contains hundreds of made-up pages (often "clear: both" is used). A new design is coming up. The task is not to break what is.
Example:
jsfiddle.net/yRcg7/HTML
:

<div class="sidebar">Menu</div>
<div class="content">
    before
    <div>
        <div class="float" style="background: black;"></div>
        <div class="float" style="background: white;"></div>
        <div class="clear"></div>
    </div>
    after
</div>

CSS:

.sidebar {width: 100px; float: right; background: red; height: 200px;}
.content {margin-right: 150px; background: silver; height: 500px;}
.float {float: left; width: 20px; height: 20px;}
.clear {clear: both;}

Answer 1

It's obvious: don't use float for other purposes (floating and text wrapping): jsfiddle.net/yRcg7/1/

Answer 2

clear clear, parent overflow:auto or hidden

Answer 3

so .content{overflow: hidden} solves everything, but you can’t look at the site, it would be more convenient