小案例！案例不限！！

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS 浮动属性</title>

<style type="text/css">

ul li{list-style: none; width: 100px;height: 40px; line-height: 40px;text-align: center;background: #CCC;margin:5px 2px ;float: left;}

#float {width: 200px;height: 200px;background: green;float: left;}

#clear{clear:both;}

</style>

</head>

<body>

<ul>

<li>html</li>

<li>css</li>

<li>JavaScript</li>

<li>jQuery</li>

<li>php</li>

</ul>

<div id="clear"></div>

<div id="float">div1</div>

<div id="float">div2</div>

<div id="float">div3</div>

</body>

</html>