abstrakt：給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。而此浮動(dòng)元素在文檔流空出的位置，由后續(xù)的(非浮動(dòng))元素填充上去：塊級(jí)元素直接填充上去，若跟浮動(dòng)元素的范圍發(fā)生重疊，浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素：有空隙就插入。<!DOCTYPE html><html lang="en"><head>
給元素的float屬性賦值后，就是脫離文檔流，進(jìn)行左右浮動(dòng)，緊貼著父元素(默認(rèn)為body文本區(qū)域)的左右邊框。
而此浮動(dòng)元素在文檔流空出的位置，由后續(xù)的(非浮動(dòng))元素填充上去：塊級(jí)元素直接填充上去，若跟浮動(dòng)元素的范圍發(fā)生重疊，浮動(dòng)元素覆蓋塊級(jí)元素。內(nèi)聯(lián)元素：有空隙就插入。
<!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>
Korrigierender Lehrer：天蓬老師Korrekturzeit：2019-01-25 10:35:07
Zusammenfassung des Lehrers：浮動(dòng)使用元素脫離了文檔流,沿水平方向移動(dòng),只有窗口才能限制住,并且任何元素,一旦浮動(dòng)都支持寬高定義了