float屬性是CSS常用的一個(gè)屬性，應(yīng)用場(chǎng)景廣泛山析，同時(shí)也是一個(gè)難點(diǎn)堰燎，涉及到一些相關(guān)細(xì)節(jié)及注意點(diǎn)。因此笋轨，就特別整理總結(jié)一下秆剪。
一赊淑、float介紹
float元素也稱為浮動(dòng)元素，設(shè)置了float屬性的元素會(huì)根據(jù)屬性值向左或向右浮動(dòng)仅讽。浮動(dòng)元素會(huì)從普通文檔流中脫離陶缺，但浮動(dòng)元素影響的不僅是自己，它會(huì)影響周圍的元素對(duì)齊進(jìn)行環(huán)繞洁灵。簡(jiǎn)單來說饱岸，就是讓block元素?zé)o視float元素，讓inline元素讓流水一樣圍繞著float元素來實(shí)現(xiàn)浮動(dòng)布局处渣。
文字環(huán)繞圖片是float典型的應(yīng)用場(chǎng)景伶贰，如下所示：
html代碼
<img class="float" src="image1.jpg">
<p class="around">Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. </p>
css代碼
.float{
float:left;
margin: 10px;
width: 100px;
height: 100px;
}
.around {
background: #00ff90;
width:300px;
padding: 10px;
}
由上圖可以看出蛛砰，img元素設(shè)置了float：left之后會(huì)脫離文檔流而居于左側(cè)存在罐栈。而p元素?zé)o視img元素的存在，從窗口的左上角開始流入泥畅，但是p元素中的文字意識(shí)到img元素的存在而環(huán)繞圖片流入荠诬。并且img元素是漂浮在p元素的上層。
二位仁、float元素特性
1.塊級(jí)框
不管一個(gè)元素是行內(nèi)元素還是塊級(jí)元素柑贞，如果被設(shè)置了浮動(dòng)，那浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框聂抢，可以設(shè)置它的width和height钧嘶，因此float常常用于制作橫向配列的菜單，可以設(shè)置大小并且橫向排列琳疏。
首先看一個(gè)塊級(jí)元素的例子有决。
html代碼
<div class="div1">
<img src="image1.jpg">
</div>
<div class="div2">
<img src="image2.jpg">
</div>
css代碼
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
float: left;
padding:10px;
border: 3px solid red;
}
默認(rèn)情況下，div元素的寬是100%空盼，一旦讓該div浮動(dòng)起來书幕，立刻會(huì)像inline元素一樣產(chǎn)生包裹性，寬度會(huì)跟隨內(nèi)容自適應(yīng)揽趾。
再來看下行內(nèi)元素的例子：
html代碼
<div class="box">
<span class="rule1">
首頁
</span>
<span class="rule1">
發(fā)現(xiàn)
</span>
<span class="rule1">
動(dòng)態(tài)
</span>
<span class="rule1">
我的
</span>
</div>
css代碼
.box {
background: #d32d2d;
padding: 10px;
width: 500px;
height: 400px;
}
.rule1 {
float: left;
margin: 10px;
padding: 10px;
background: #eee;
width: 100px;
text-align: center;
}
由上圖發(fā)現(xiàn)台汇，當(dāng)span設(shè)置float屬性后，可以指定width篱瞎，height值苟呐。
同時(shí)可以發(fā)現(xiàn)，當(dāng)多個(gè)元素指定為float且同時(shí)為left/right時(shí)俐筋，元素是緊挨著排列牵素，行內(nèi)寬度不夠時(shí)再換行排列。
2.高度崩塌
html代碼
<div class="div1">
<img src="image1.jpg">
</div>
<div class="div2">
<img src="image2.jpg">
</div>
css代碼
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
border: 3px solid red;
}
.div2 img {
float: left;
padding:10px;
}
將float屬性設(shè)置給div2內(nèi)部的img元素校哎，可以看出div2的高度并沒有img元素被撐起來两波，因此又叫高度崩塌瞳步。
因?yàn)閷mg元素設(shè)置為浮動(dòng)元素，所以脫離文檔流腰奋。因而div2中認(rèn)為沒有元素单起，所以產(chǎn)生了高度崩塌。具體怎么解決高度崩塌劣坊，后面再介紹嘀倒。
三、clear屬性
clear屬性的作用是清除浮動(dòng)局冰。
clear : none | left | right | both
取值：
none : 默認(rèn)值测蘑。允許兩邊都可以有浮動(dòng)對(duì)象
left : 不允許左邊有浮動(dòng)對(duì)象
right : 不允許右邊有浮動(dòng)對(duì)象
both : 不允許有浮動(dòng)對(duì)象
html代碼
<div class="div1">
</div>
<div class="div2">
</div>
css代碼
.div1{
float: left;
width: 300px;
height: 150px;
padding: 10px;
border: 3px solid black;
background-image: url("image1.jpg")
}
.div2 {
border: 3px solid red;
padding:10px;
width:500px;
height:200px;
background-image: url("image2.jpg")
}
如上圖所示，由于div1是浮動(dòng)元素康二，所以div2在div1底層鋪展碳胳。
如果想要讓div2換行排列，居于div1底端下方沫勿，這個(gè)時(shí)候就要用到clear屬性了挨约。
css代碼
.div1{
float: left;
width: 300px;
height: 150px;
padding: 10px;
border: 3px solid black;
background-image: url("image1.jpg")
}
.div2 {
clear: left;
border: 3px solid red;
padding:10px;
width:500px;
height:200px;
background-image: url("image2.jpg")
}
只需要在div2中加入clear: left。
對(duì)于CSS的清除浮動(dòng)(clear)产雹，一定要牢記：這個(gè)規(guī)則只能影響使用清除的元素本身诫惭，不能影響其他元素。
以上圖為例子說明蔓挖，div1和div2都設(shè)置了float：left夕土。如果在div1的CSS樣式中添加clear:right，來迫使div2下移瘟判，則沒有任何效果怨绣。因?yàn)檫@個(gè)清除浮動(dòng)是在div1中調(diào)用的，它只能影響div1荒适，不能影響div2梨熙。
要想讓div2下移，就必須在div2的CSS樣式中使用浮動(dòng)刀诬。div2的左邊有浮動(dòng)元素div1咽扇，因此只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不允許出現(xiàn)浮動(dòng)元素，這樣div2就被迫下移一行陕壹。
四质欲、BFC
為什么要介紹BFC，是因?yàn)樗蚮loat有著密切的關(guān)系糠馆。
1.BFC的介紹
定義
一些元素嘶伟，如float元素，如position為absolute,inline-block,table-cell或table-caption的元素又碌，以及overflow屬性不為visible的元素九昧，它們將會(huì)建立一個(gè)新的塊級(jí)格式化上下文(Block Formatting Context),也就是我們所說的BFC绊袋。
形成
BFC也是HTML中的一個(gè)盒子（看不見而已），只有滿足至少下列條件之一才能形成BFC:
- float屬性不為none.
- position屬性不為static和relative.
- display屬性為下列之一:table-cell,table-caption,inline-block, flex,inline-flex.
- overflow屬性不為visible.
布局規(guī)則
- 內(nèi)部的Box會(huì)在垂直方向铸鹰，一個(gè)接一個(gè)地放置癌别。
- Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊蹋笼，與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化展姐，否則相反)。即使存在浮動(dòng)也是如此剖毯。
- BFC的區(qū)域不會(huì)與float box重疊圾笨。
- BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素逊谋。
- 計(jì)算BFC的高度時(shí)擂达，浮動(dòng)元素也參與計(jì)算
有些規(guī)則可能不太理解，看完下面的內(nèi)容就會(huì)理解涣狗。
2.BFC作用
消除Margin Collapse
在正常情況下谍婉，在一個(gè)容器內(nèi)的所有box將會(huì)由上至下依次垂直排列，即我們所說的一個(gè)元素占一行镀钓，并切垂直相鄰的距離(即margin)是由各自的margin決定的，而不是兩個(gè)margin的疊加镀迂。
讓我們看一個(gè)例子：
html代碼:
<div class="container">
<p>條目 1</p>
<p>條目 2</p>
<p>條目 3</p>
</div>
css代碼:
.container {
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 10px 0;
text-align: center;
}
理想情況下丁溅，我們會(huì)認(rèn)為p標(biāo)簽之間的margin應(yīng)該是它們的和(20px),但實(shí)際上卻是10px.這其實(shí)是collapsing margins(外邊距坍塌)。其中flex布局不存在collapsing margins探遵，水平方向上也不存在collapsing margins窟赏。
利用BFC能消除collapsing margins。緊記只有當(dāng)元素在同一個(gè)BFC中時(shí)箱季，垂直方向上的margin才會(huì)clollpase涯穷。如果它們屬于不同的BFC，則不會(huì)有margin collapse藏雏。因此我們可以再建立一個(gè)BFC去阻止margin collpase的發(fā)生拷况。
所以為了讓他們的margins變成20，我們只需要用div,建立一個(gè)BFC,令p元素處于不同BFC即可掘殴。
html代碼
<div class="container">
<p>條目 1</p>
<p>條目 2</p>
<div class="newBFC">
<p>條目 3</p>
</div>
</div>
css代碼
.container {
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 10px 0;
text-align: center;
}
.newBFC {
overflow: hidden;
}
容納浮動(dòng)元素
就是解決上面遇到的高度崩塌問題赚瘦。
只需要將css代碼改動(dòng)一下，增加一個(gè)BFC來容納浮動(dòng)元素奏寨。
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
overflow: hidden;
border: 3px solid red;
}
.div2 img {
float: left;
padding:10px;
}
除此之外起意，對(duì)于解決高度崩塌，還有如下方式：
增加一個(gè)清除浮動(dòng)的子元素
html代碼
<div class="div1">
<img src="image1.jpg">
</div>
<div class="div2">
<img src="image2.jpg">
<div style="clear: both"></div>
</div>
增加一個(gè)div元素病瞳，因?yàn)槭乔宄乩抗荆瑫?huì)在img元素底部顯示悲酷，因此會(huì)撐起div2高度。
阻止文本換行
大多數(shù)情況(若沒有特殊設(shè)置)亲善，如Figure1,文本將會(huì)環(huán)繞浮動(dòng)元素,但有時(shí)候這并不是我們期望的舔涎。我們期待的是Figure2如圖:
想要達(dá)到圖2的效果，只需要將右部的文字區(qū)變成一個(gè)BFC即可逗爹，如下圖所示亡嫌。
五、總結(jié)
以上就是float有關(guān)的內(nèi)容掘而，內(nèi)容涉及比較多挟冠，這也反映出float的重要性，關(guān)于float的應(yīng)用場(chǎng)景非常多袍睡。
