abstract：<!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浮動之后，內(nèi)容會脫離文檔流相當(dāng)于漂浮于整個文檔流之上，頁面的布局就會變化，等到利用浮動布局好頁面之后就要清除浮動，以免影響后面的頁面布局
Correcting teacher：天蓬老師Correction time：2019-03-23 14:03:56
Teacher's summary：浮動后, 頁面全部元素都是塊, 但是浮動也會讓元素變得不可控, 盡可能用定位來替代它