首先：
我們需要知道div元素（塊級元素）獨占一行
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="1" style="background:red;height:200px;padding:5px;position:relative">
<div id="2" style="background:green;height:50px;">box1</div>
<!-- div元素獨占一行 -->
<div id="3" style="background:pink;height:50px;">box2</div>
</div>
</body>
</html>
如下圖所示捆蜀，box1和box2獨占一行容达，可見如果每個div都獨占一行构舟，我們根本無法進(jìn)行布局洪碳，所以我們就需要絕對定位和浮動來幫助我們布局狭握！
絕對定位的參照關(guān)系
絕對定位會以最近的設(shè)置了position屬性的父級為參照物進(jìn)行定位闪金，如下圖box2就以id為1 的div為父級參照進(jìn)行定位
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="0" style="background:blue;padding:20px">
<div id="1" style="background:red;height:200px;padding:5px;position:relative">
<div id="2" style="background:black;width:50px;height:50px;">box1</div>
<!-- 絕對定位的父級參照物是最近的設(shè)置了position的值的父級元素，這里為 參照物為1 -->
<div id="3" style="background:pink;width:50px;height:50px;position:absolute;left:50px;top:0px">box2</div>
</div>
</div>
</body>
</html>
浮動
無論多么復(fù)雜的布局论颅，其基本出發(fā)點均是：如何在一行顯示多個div元素哎垦。顯然標(biāo)準(zhǔn)流已經(jīng)無法滿足需求，這就要用到浮動恃疯。
浮動可以理解為讓某個div元素脫離標(biāo)準(zhǔn)流漏设，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個層次今妄。
正常的div布局應(yīng)該是像下圖一樣的
<body>
<div id="1" style="background:gray;height:500px;margin-top:5px">
<div id="5" style="background:blue;width:100px;height:50px;">box1</div>
<div id="5" style="background:yellow;width:60px;height:50px">box2</div>
<div id="5" style="background:green;width:70px;height:70px;">box3</div>
<div id="5" style="background:yellow;width:200px;height:50px;">box4</div>
</div>
</body>
假如我們將box2設(shè)置浮動 style中加上屬性 float:left 向左浮動我們可以發(fā)現(xiàn)如下圖的樣子
其中box2漂浮在了box3上面郑口，從而覆蓋了一部分的box3鸳碧，從而我們可以知道浮動的元素是脫離了標(biāo)準(zhǔn)流的！
之后我們將box3也設(shè)置為向左浮動犬性，可以發(fā)現(xiàn)box3和box2并排了瞻离，并排在box2之后，而且box2和box3都漂浮在box4之上
<div id="1" style="background:gray;height:500px;margin-top:5px">
<div id="5" style="background:blue;width:100px;height:50px;">box1</div>
<div id="5" style="background:yellow;width:60px;height:50px;float:left">box2</div>
<div id="5" style="background:green;width:70px;height:70px;float:left">box3</div>
<div id="5" style="background:pink;width:200px;height:90px;">box4</div>
</div>
clear 清除浮動
清除浮動的關(guān)鍵字
clear : none | left | right | both
什么時候需要清除浮動呢乒裆？
以上面的例子 套利，如果我們希望box4不被這些漂浮的元素所覆蓋，需要怎么做呢鹤耍？
這時候就需要清除浮動了 clear了
只需要在box4 添加CSS屬性 clear:left ,就可以清除其左邊的浮動元素影響肉迫，不被他們所覆蓋
<div id="1" style="background:gray;height:500px;margin-top:5px">
<div id="5" style="background:blue;width:100px;height:50px;">box1</div>
<div id="5" style="background:yellow;width:60px;height:50px;float:left">box2</div>
<div id="5" style="background:green;width:70px;height:70px;float:left">box3</div>
<div id="5" style="background:pink;width:200px;height:90px;clear:left">box4</div>
</div>
還有當(dāng)我們浮動的元素不希望跟在其他浮動元素之后時，也可以使用clear 屬性來另起一行
<div id="1" style="background:gray;height:500px;margin-top:5px">
<div id="5" style="background:blue;width:100px;height:50px;">box1</div>
<div id="5" style="background:yellow;width:60px;height:50px;float:left">box2</div>
<div id="5" style="background:green;width:70px;height:70px;float:left;clear:left">box3</div>
</div>
