LayoutTests/fast/block/float/024.html - WebKit - Git at Google

 <html>
 <head>
 <style>
 body {
   margin: 0px;
   padding: 0px;
 }

 #logo {
   background-color: green;
   border-top: 1px solid white;
 }

 h1 {
   margin-top: 50px;
   margin-bottom: 50px;
   padding-top: 20px;
   padding-bottom: 20px;
   font-size: 220%;
   color: white;
 }

 ul {
   margin: 0;
   padding: 0;
 }

 li {
   float:left;
   border: 2px solid blue;
   display: block;
   margin: 0px;
 }
 </style>
 </head>
 <body>
 <div id="logo">
 <h1 style="height:30px"></h1>
 <div>
 <ul>
 <li>There should be a gap between this float and the green rectangle above.
 </ul>
 </div>
 </div>

 <div style="margin-top:100px;background-color:#dddddd; border:2px solid black">
 <div style="float:left;width:2em;height:2em;background-color:white"></div>
 <div style="clear:both;margin-top:1em;margin-bottom:1em"></div>
 This text should be inside a black rectangle and below the 2em white square.
 </div>
 <div style="margin-top:1em;background-color:#dddddd; border:2px solid black">
 <div style="float:left;width:2em;height:2em;background-color:white"></div>
 <div style="clear:both;margin-top:-1em;margin-bottom:1em"></div>
 This text should also be inside a black rectangle and below the 2em white square.
 </div>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	padding: 0px;
	}

	#logo {
	background-color: green;
	border-top: 1px solid white;
	}

	h1 {
	margin-top: 50px;
	margin-bottom: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 220%;
	color: white;
	}

	ul {
	margin: 0;
	padding: 0;
	}

	li {
	float:left;
	border: 2px solid blue;
	display: block;
	margin: 0px;
	}
	</style>
	</head>
	<body>
	<div id="logo">
	<h1 style="height:30px"></h1>
	<div>
	<ul>
	<li>There should be a gap between this float and the green rectangle above.
	</ul>
	</div>
	</div>

	<div style="margin-top:100px;background-color:#dddddd; border:2px solid black">
	<div style="float:left;width:2em;height:2em;background-color:white"></div>
	<div style="clear:both;margin-top:1em;margin-bottom:1em"></div>
	This text should be inside a black rectangle and below the 2em white square.
	</div>
	<div style="margin-top:1em;background-color:#dddddd; border:2px solid black">
	<div style="float:left;width:2em;height:2em;background-color:white"></div>
	<div style="clear:both;margin-top:-1em;margin-bottom:1em"></div>
	This text should also be inside a black rectangle and below the 2em white square.
	</div>