css中关于float的例子
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Floating example</title>
<style>
.container{ width:800px; border:1px solid #ccc; margin:20px; overflow: hidden; } .box{ width:100px; height:100px; border:1px dotted black; background-color:yellow; margin: 20px; position: relative; } .box span{ position:absolute; bottom:0px; right:0px; } .float-left{ float:left; } .float-right{ float:right; } </style></head><body><p>Floating examples</p><p>Box1 float to the left.</p><div class="container"> <div class="box float-right"> <span>Box1</span> </div> <div class="box"> <span>Box2</span> </div> <div class="box"> <span>Box3</span> </div></div> <p>Box1 float to left and under the Box2</p><div class="container"> <div class="box float-left"> <span>Box1</span> </div> <div class="box"> <span>Box2</span> </div> <div class="box"> <span>Box3</span> </div></div> <p>All box float left</p> <div class="container"> <div class="box float-left"> <span>Box1</span> </div> <div class="box float-left"> <span>Box2</span> </div> <div class="box float-left"> <span>Box3</span> </div> </div> </body></html>
例如：float浮动之后，内容会脱离文档流相当于漂浮于整个文档流之上，页面的布局就会变化，等到利用浮动布局好页面之后就要清除浮动，以免影响后面的页面布局