1、為什么要使用浮動

浮動主要用在水平布局，比如想實(shí)現(xiàn)橫排擺放2個(gè)div，發(fā)現(xiàn)不管是inline還是inline-block，都會有一個(gè)白的的間隙，因?yàn)閾Q行會被解析，同時(shí)解析出來的間隔不可控，而不換行的話，代碼可讀性就會讓人想砸電腦，所以引入了浮動的概念

2、浮動的定義

使元素脫離文檔流、按照指定的方向發(fā)生移動，遇到父級邊界或者相鄰的浮動元素停下來

任何標(biāo)簽都有浮動屬性，值有4個(gè)，none-不使用浮動，left-向左浮動，right-向右浮動，inherit-繼承父級

3、使用浮動的效果以及優(yōu)缺點(diǎn)

效果：

1、塊元素在一行顯示

2、行元素支持設(shè)置寬高

3、塊元素不設(shè)寬度的時(shí)候，內(nèi)容撐開寬度

4、脫離文檔流，提升層級半層，位置提升而內(nèi)容不提升

5、浮動元素支持所有的css命令

優(yōu)點(diǎn)：

完美實(shí)現(xiàn)水平布局以及行元素的相關(guān)設(shè)置

缺點(diǎn)：

脫離文檔流，提升層級半層，位置提升而內(nèi)容不提升，對布局造成干擾，需要清除浮動帶來的影響

4、清除浮動帶來的影響

如果想實(shí)現(xiàn)這樣的布局

按理來說，這樣的代碼就行

但是這樣代碼的結(jié)果是

div層級提升半層（位置提升而內(nèi)容不提升），所以綠色的p標(biāo)簽會上來，因?yàn)樗J(rèn)為上面的div浮起來了把位置讓出來了，而內(nèi)容“我愛開發(fā)”，它會識別到“1”、“2”兩個(gè)字，所以“我愛開發(fā)”就會被“擠”到后邊。有問題就會有解決辦法而且辦法總比問題多，兩大種方法，添加父級或者添加平級

添加父級：

添加父級又有兩種方法

a）給父級設(shè)置高度，但是有諸多不便利

看起來是好了，但是打開控制臺會發(fā)現(xiàn)：

首先是需要考慮到子債父償?shù)膯栴}，參考上一篇文章--盒模型

然后就是當(dāng)內(nèi)部子級需要調(diào)整或者增刪子級，需要調(diào)整父級，父級高度設(shè)置不合理的話，會有這種情況，還得慢慢調(diào)整，太繁瑣，不利于維護(hù)

所以我們常用第二種方式：

b）為父級設(shè)overflow屬性，值為hidden(隱藏超出的部分)或者scroll(滾動)，一般用hidden，因?yàn)橥瑯幽茉谄渌Ч掀鹱饔?/p>

完美解決

添加平級：

新添加的元素不給寬高內(nèi)容以及任何樣式，不影響布局，也能完美保留浮動效果并清除浮動帶來的影響

通常是把浮動的元素單獨(dú)包裹起來,為父級設(shè)overflow屬性，值為hidden，這樣層級分明并且正好能解決子債父償問題，簡單直接！