摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Floating example</
<!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浮動(dòng)之后，內(nèi)容會(huì)脫離文檔流相當(dāng)于漂浮于整個(gè)文檔流之上，頁(yè)面的布局就會(huì)變化，等到利用浮動(dòng)布局好頁(yè)面之后就要清除浮動(dòng)，以免影響后面的頁(yè)面布局
批改老師：天蓬老師批改時(shí)間：2019-03-23 14:03:56
老師總結(jié)：浮動(dòng)后, 頁(yè)面全部元素都是塊, 但是浮動(dòng)也會(huì)讓元素變得不可控, 盡可能用定位來(lái)替代它