Floats disrupt rendering of RP non-hasLayout elements in IE6

Full disruption of rendering

A floated child which touches a sibling clear prevents all rendering its RP non-hasLayout block level parent (and, in IE7, the float itself).

The Internet Explorer Developer Toolbar indicates that the parent div and the clear are positioned correctly.

Partial disruption of rendering

Minimal test case

div.float {
	float: left;
	margin-top: 150px;
        margin-right: 50px;
	width: 250px;
	background-color: blue;
}

This RP non-hasLayout div is a sibling of the float.

This RP non-hasLayout div is a sibling of the container.

This RP non-hasLayout div is another sibling of the container.

Minimal test case 2

This is some in-flow content before the float. 
div.float {
	float: left;
	margin-top: 150px;
        margin-right: 50px;
	width: 250px;
	background-color: blue;
}

This RP non-hasLayout div is a sibling of the float.

This RP non-hasLayout div is a sibling of the container.

This RP non-hasLayout div is another sibling of the container.

Analysis

A floated child prevents the rendering of the background and borders of RP non-hasLayout block level elements (such as container div and container div's sibling) that should display within the float's margin box.

The Internet Explorer Developer Toolbar indicates that the parent div (which has a large margin-bottom pushing the other container div down) does actually stretch to contain the float as it would if it were hasLayout (as in the next example), but it is not rendered as such when it is not hasLayout, and it doesn't affect the position of the other in-flow container div which follows.

The bug doesn't affect the parent div if there is are sibling in-flow line boxes or block-level elements preceding the float, or if the float is wrapped. It does not affect the container div's RP non-hasLayout sibling if the float itself has an RP non-hasLayout sibling whose content box bottom lies below the level of the bottom of the float.

See also