abstract：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。<!DOCTYPE html><html lang="en"><head>
给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.box1{height:280px;width:400px;float:left;border:1px solid black;margin:10px 20px;position: relative;}
.box2{float:left;}
.box3{float:right;}
#a{height:50px;width:100px;background-color:Red;}
#b{height:50px;width:200px;background-color:Yellow;}
#c{height:50px;width:300px;background-color:Blue;}
#d{height:50px;width:400px;background-color:green;}
#e{height:80px;width:400px;background-color:peru;}
.clear{clear:both}
</style>
</head>
<body>
<div class="box1">
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3" />
<div id="d">div-d</div>
<input type="text" value="input4" />
</div>
<div class="box1">
<div class="box2" id="a">div-a</div>
<div class="box2" id="b">div-b</div>
<div class="box2" id="c">div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3" />
<div class="box2" id="d">div-d</div>
<input type="text" value="input4" />
</div>
<div class="box1">
<div class="box3" id="a">div-a</div>
<div class="box3" id="b">div-b</div>
<div class="box3" id="c">div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3" />
<div class="box3" id="d">div-d</div>
<input type="text" value="input4" />
<div id="e">div-e</div>
</div>
<div class="box1" style="width:600px;">
<div class="box2" id="a">div-a</div>
<div class="box2" id="b">div-b</div>
<div class="box2" id="c">div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3" />
<br>
<div class="box2" id="d">div-d</div>
<input type="text" value="input4" />
<div class="clear"></div>
<div id="e">div-e</div>
</div>
<div class="box1" style="width:600px;">
<div class="box3" id="a">div-a</div>
<div class="box3" id="b">div-b</div>
<div class="box3" id="c">div-c</div>
<input type="text" value="input1" />
<input type="text" value="input2" />
<input type="text" value="input3" />
<div class="box3" id="d">div-d</div>
<input type="text" value="input4" />
<div class="clear"></div>
<div id="e">div-e</div>
</div>
</body>
</html>
Correcting teacher：天蓬老师Correction time：2019-01-25 10:35:07
Teacher's summary：浮动使用元素脱离了文档流,沿水平方向移动,只有窗口才能限制住,并且任何元素,一旦浮动都支持宽高定义了