Why top margin of html element is ignored after floated element?

Solution 1:

You've correctly identified the problem. The floated <div> is no longer used to calculate the top margin, and therefor the 2 <div>'s just butt against each other. A simple way to solve this is just to wrap the 2nd <div>. This will allow the wrapper to (invisibly) butt up against the first <div>, and allow you to specify white space for it.

The trick to getting the wrapper to work right is to have the white space be internal white space. In other words, the wrapper uses padding instead of margin. This means whatever is going on outside the wrapper (like other floating elements) won't really matter.

<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
    <div style="border: solid red 1px">This div should not touch the other div.</div>
</div>

Solution 2:

you could simply add a div between them

<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>

and that should take care of it.

Lots of WordPress themes (and not only) employ this technique

Solution 3:

On the second <div>:

float: none; display: inline-block;

Compatibility table for browsers: http://caniuse.com/#feat=inline-block

Solution 4:

An open-ended clear; without containers, nor extra <div>

Another answer was almost right, but missed a width: 100%. Here is the corrected version.

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

Clears without this width: 100% either require the floated element to be in a well marked off container or need an extra, semantically empty <div>. Conversely, strict separation of content and mark-up requires a strict CSS solution to this problem, i.e. without any additional non-semantic HTML.

The mere fact that one needs to mark off the end of a float, does not allow for unattended typesetting.

If the latter is your goal, the float should be left open for anything (paragraphs, ordered and unordered lists etc.) to wrap around it, until a clear is encountered. In the above example, the clear is set by a new heading.

This solution gets used extensively on my website to solve the problem when the text next to a floated miniature is short and the top-margin of the next clearing object is not respected. It also prevents any manual intervention when automatically generating PDFs from the site.

Solution 5:

set "float:left" on the second div