margin-top, will nicht wie ich es will

[nocheinPoet]

Es wird noch spannender:

<div>  
	<div style="float: left ; background: #ffcfcf">xxx</div>  
</div>  
<div style="clear: both; margin-top: 30px ; background: #cfffcf">xxx</div>  

selbst ein normales DIV um das erste hilft nichts. Macht man nun mal das hier:

<div>  
	<div style="float: left ; background: #ffcfcf">xxx</div>  
</div>  
yyy  
<div style="clear: both; margin-top: 30px ; background: #cfffcf">xxx</div>  

wird es deutlich, das yyy wird gefloatet und hinten an gesetzt, es gibt ein clear und der margin-top wird angezogen. Nur dürfe der DIV um den ersten DIV ohne float als Blockelement das untere yyy nicht hinten ran ziehen, sondern müsste es in eine neue Zeile bringen wie das hier eben zeigt:

<div>xxx</div>  
yyy

Nun habe ich noch mal das versucht:

<div style="background: #cfcfff; margin: 100px;">  
	<div style="float: left ; background: #ffcfcf">xxx</div>  
</div>  
<div style="clear: both; margin-top: 30px ; background: #cfffcf">xxx</div>  

und der margin wird auch nur vorne angezogen, nach unten nicht, wobei aber es so:

<div style="background: #cfcfff; margin-bottom: 100px;">  
	<div style="float: left ; background: #ffcfcf">xxx</div>  
</div>  
<div style="clear: both; margin-top: 30px ; background: #cfffcf">xxx</div>  

nach unten angezogen wird. Dann habe ich noch das hier versucht:

<div style="background: #cfcfff; padding: 1px;">  
	<div style="float: left ; background: #ffcfcf">xxx</div>  
</div>  
<div style="clear: both; margin-top: 30px ; background: #cfffcf">xxx</div>  

und das padding bringt nun auch ein clear, aber nur wenn mindestens 1px genommen wird. Ist jedenfalls sehr mysteriös.