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浮动之后，内容会脱离文档流相当于漂浮于整个文档流之上，页面的布局就会变化，等到利用浮动布局好页面之后就要清除浮动，以免影响后面的页面布局
Correcting teacher：天蓬老师Correction time：2019-03-23 14:03:56
Teacher's summary：浮动后, 页面全部元素都是块, 但是浮动也会让元素变得不可控, 尽可能用定位来替代它