什么是浮動(dòng)
浮動(dòng)是元素在頁面中的一種定位方式茴厉，在css中用float表示泽台，它有兩個(gè)值為：left、right矾缓，這個(gè)屬性產(chǎn)生的原本不是用來做布局的怀酷，而是用來做文字環(huán)繞的，但是后來人們發(fā)現(xiàn)做布局也不錯(cuò)嗜闻，因此將其用來做布局蜕依，甚至忘記用它來做文字環(huán)繞。
浮動(dòng)的效果
1泞辐、浮動(dòng)定位的元素會(huì)被排除在文檔流之外——脫離文檔流（不占據(jù)頁面空間）笔横，其余的元素要上前補(bǔ)位
例一： 當(dāng)前面的元素設(shè)置為float:left后竞滓，該元素脫離了整個(gè)文檔流咐吼，導(dǎo)致后面元素上前補(bǔ)位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.floatDiv{
height: 100px;
width: 100px;
background: red;
float: left;
}
.nextDiv{
width: 150px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<div class="floatDiv"></div>
<div class="nextDiv"></div>
</body>
</html>
2、浮動(dòng)元素會(huì)蜕逃樱靠在父元素的左邊或者右邊锯茄，或者停靠在其他已浮動(dòng)元素的邊緣上（元素只能在當(dāng)前所在的行進(jìn)行浮動(dòng)）
例二: 子元素childDiv設(shè)置左浮動(dòng)后它停靠在父元素的左邊肌幽，nextDiv2設(shè)置了左浮動(dòng)后晚碾，它停靠在已設(shè)置浮動(dòng)的nextDiv1的邊緣上
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.floatDiv{
height: 150px;
width: 150px;
background: red;
}
.childDiv{
width: 100px;
height: 100px;
background: green;
float: left;
}
.nextDiv1{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.nextDiv2{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="floatDiv">
floatDiv
<div class="childDiv">childDiv</div>
</div>
<hr style="margin:10px 0px;">
<div class="nextDiv1">nextDiv1</div>
<div class="nextDiv2">nextDiv2</div>
</body>
</html>
3喂急、浮動(dòng)元素依然位于父元素之內(nèi)（如例二所示）
4格嘁、使用浮動(dòng)可以是多個(gè)塊級(jí)元素在一行內(nèi)顯示
例三：設(shè)置li元素浮動(dòng)，可以將li排成一行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
overflow: hidden;
}
ul>li{
display: inline;
width: 100px;
height: 100px;
background: #fff;
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
float: left;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
transition:1s all;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
5廊移、文本糕簿、行內(nèi)元素、行內(nèi)塊級(jí)元素采用環(huán)繞的方式來浮動(dòng)狡孔，是不會(huì)被浮動(dòng)元素壓的懂诗，會(huì)巧妙的避開浮動(dòng)元素
例四：當(dāng)圖片在被浮動(dòng)時(shí)，其他的內(nèi)容會(huì)盡可能嘗試圍繞它出現(xiàn)苗膝，如果我們改變?nèi)萜鞯拇笮』蛘邔g覽器窗口變窄殃恒，文本只是簡(jiǎn)單的自我重排而不會(huì)碰觸到圖片。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width: 400px;
}
img{
float: left;
}
</style>
</head>
<body>
<img src="./fselect.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, quibusdam, veniam aspernatur est ratione eos maiores iste incidunt corrupti tempora ipsa error totam rerum. Cupiditate distinctio quae possimus. Totam, aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, animi illum dolores officiis ducimus aut quis id velit ipsa fuga excepturi accusamus voluptas blanditiis nostrum quod perspiciatis beatae dolor quae?</p>
</body>
</html>
像例四中這種盒子到底是如何工作的辱揭？
現(xiàn)在我們?cè)诙温涞膱D片之間添加額外的空白离唐。
添加如下css: p{margin:20px}
此刻你將會(huì)發(fā)現(xiàn)在圖片和段落之間不會(huì)產(chǎn)生額外的空白
相反我們?yōu)閳D片添加：
img{margin:20px;}，則會(huì)發(fā)現(xiàn)圖片和段落之間產(chǎn)生了額外的空白
為什么增加段落的margin不會(huì)在段落和圖片之間產(chǎn)生額外的空白问窃？這就涉及到一個(gè)段落的盒模型侯繁。
給段落加上如下代碼：p{border:1px solid #ccc; },結(jié)果如下：
正如你所看到的，圖片實(shí)際上在段落盒子的里面泡躯，所示設(shè)置margin顯示在段落外面贮竟，這就是為什么在圖片和段落之間不會(huì)怎么額外的額外的空白。
如果我們想要改變這種行為较剃，讓段落不在環(huán)繞圖片咕别，我們則可以給段落也設(shè)置浮動(dòng)，讓段落浮動(dòng)到左邊写穴，并且設(shè)置相應(yīng) 的寬度
瘋狂怪異的浮動(dòng)原則
通常開發(fā)人員會(huì)用浮動(dòng)來控制列表的位置惰拱，例如讓多個(gè)塊級(jí)元素行排列
例如：給li設(shè)置相同的高度，并且所有l(wèi)i左浮動(dòng)啊送，結(jié)果展示所有l(wèi)i排列成一行偿短，當(dāng)超出一行時(shí)，換行顯示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
overflow: hidden;
}
ul>li{
width: 100px;
height: 100px;
background: #fff;
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
float: left;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
transition:1s all;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
上面例子顯示當(dāng)我們所有的li高度相同時(shí)的浮動(dòng)排列馋没，如果我們給li設(shè)置不同的高度時(shí)昔逗，它會(huì)怎樣浮動(dòng)呢？
圖片中顯示篷朵，當(dāng)元素5高度不一致時(shí)勾怒，會(huì)發(fā)現(xiàn)元素7顯示在右邊婆排，它不會(huì)讓自己盡可能的浮動(dòng)到左邊，如果我們?nèi)サ暨@些li的浮動(dòng)笔链，設(shè)置
li {display：inline-block;},結(jié)果顯示截然不同段只。
跟上面不同之處是，圖片的默認(rèn)狀態(tài)是沿著它們的底部邊緣垂直對(duì)齊鉴扫，為了顯示和浮動(dòng)一樣的效果赞枕，我們?cè)O(shè)置```li{vertical-align:top;}
現(xiàn)在看起來和浮動(dòng)相似了，那么坪创，我們?cè)O(shè)置浮動(dòng)的li元素為何沒有像這樣顯示鹦赎？
事實(shí)證明，css規(guī)范列出了九條規(guī)則來規(guī)定浮動(dòng)的行為误堡。
1古话、浮動(dòng)元素會(huì)被推到他的容器的邊緣
2、任何浮動(dòng)元素都會(huì)出現(xiàn)在他之前的浮動(dòng)元素的旁邊或者下方锁施，如果元素都是左浮動(dòng)陪踩，那么第二個(gè)元素會(huì)出現(xiàn)在第一個(gè)元素的右邊，如果都是右浮動(dòng)悉抵，第二個(gè)元素會(huì)出現(xiàn)在第一個(gè)元素的左邊肩狂。
3、左浮動(dòng)的盒子不能出現(xiàn)在右浮動(dòng)盒子的右邊
4姥饰、浮動(dòng)元素不能高過他的容器的上邊緣（當(dāng)涉及到塌陷的邊距會(huì)將更復(fù)雜）
5傻谁、浮動(dòng)元素不能比前一個(gè)塊級(jí)元素或者浮動(dòng)元素高
6、浮動(dòng)元素不能高過前一行內(nèi)聯(lián)元素
7列粪、靠著另一個(gè)浮動(dòng)元素的浮動(dòng)元素不能超過自己的父容器邊緣
8审磁、一個(gè)浮動(dòng)的盒子必須盡可能的高的放置
9、一個(gè)左浮動(dòng)的盒子必須盡可能左的放置岂座，一個(gè)右浮動(dòng)的盒子要盡可能的右的放置态蒂，盡可能高的位置的優(yōu)先級(jí)比左右高
根據(jù)css的規(guī)則，上面問題的原因是：當(dāng)有一個(gè)浮動(dòng)元素時(shí)费什，后面緊接著的浮動(dòng)元素至少要占據(jù)與之前同樣或者更多的垂直高度來打破這一行使得流動(dòng)下移钾恢。
清除浮動(dòng)的影響
1、為后面的元素設(shè)置clear:left鸳址、clear:right瘩蚪、clear:both
2、當(dāng)一個(gè)給點(diǎn)的元素只包含浮動(dòng)元素時(shí)會(huì)產(chǎn)生奇怪的現(xiàn)象：父元素的高度會(huì)塌陷稿黍，
例如：我們給父元素添加背景
當(dāng)未設(shè)置浮動(dòng)時(shí)顯示如下：
當(dāng)設(shè)置了浮動(dòng)后疹瘦，顯示如下：
你會(huì)發(fā)現(xiàn)當(dāng)我們?cè)O(shè)置了浮動(dòng)后，導(dǎo)致父元素的高度塌陷闻察，如何解決這種父元素高度塌陷的問題拱礁？
- 方案一：創(chuàng)建一個(gè)跟浮動(dòng)元素同級(jí)的空元素（常常是一個(gè)div），然后給空容器設(shè)置
clear:both屬性辕漂，就會(huì)解決這種高度塌陷的問題
<div class="clearfix" style="clear:both"></div> - 方案二：新的解決方案是利用overflow屬性呢灶，這個(gè)屬性控制了超出其包含框邊界的內(nèi)容的功能。如果將父項(xiàng)目的overflow設(shè)置為hidden或者auto钉嘹，也能解決高度坍塌鸯乃。
ul { overflow: auto;} - 方案三：如果子元素全部浮動(dòng)，父元素就會(huì)塌陷跋涣，所以在所有浮動(dòng)子元素后添加一個(gè)沒有浮動(dòng)元素把父元素?fù)纹饋碛@個(gè)元素找不到、不占據(jù)空間陈辱，不能讓它里面有內(nèi)容奖年，有內(nèi)容也要隱藏
.clearfix:after{content:'.';
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix:after{zoom：1；}/*解決IE的問題*/
