Tests/Data/VisualTests/float_basic.rml

<rml>
<head>
    <title>Floats, block formatting contexts</title>
    <link type="text/rcss" href="../style.rcss"/>
	<link rel="help" href="https://www.w3.org/TR/CSS21/visufx.html#propdef-overflow" />
	<meta name="Description" content="Nesting divs should still hide overflow. Elements whose containing block is located above the 'overflow: hidden' element should be visible." />
	<meta name="See also" content="CSS 2.1 'clipping-' and 'overflow-' tests." />
	<style>
		body {
			background: #ddd;
			color: #444;
		}
		#content {
			width: 250px;
			margin: 0 auto;
		}
		div.float {
			float: left;
			background-color: #bbb;
			border: 1px #333;
			width: 100px;
			height: 100px;
			margin: 5px;
		}
		.red {
			color: red;
		}
	</style>
</head>

<body>
<p>This test makes assumptions about the font properties, that is, it depends on the size of the layed-out text.</p>
<div id="content">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
	<div class="float">float: left</div>
	<span class="red">This</span> is the first word after the float and should flow next to the float.</p>
	<p>This paragraph should flow next to the float.</p>

	<hr/>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
	<div class="float">float: left</div>
	<span class="red">This</span> is the first word after the float and should flow next to the float.</p>
	<p style="clear: left;">This paragraph should be below the float as it clears the float.</p>

	<hr/>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
	<div class="float">float: left</div>
	<span class="red">This</span> is the first word after the float and should flow next to the float.</p>
	<p style="overflow: auto;">This paragraph should establish a new block formatting context. This element's size and position should not overlap with the float, but still be located next to it.</p>
</div>
</body>
</rml>