一、Float的特性
1. 應(yīng)用于文字圍繞圖片
2. 創(chuàng)建一個(gè)塊級(jí)框
3. 多列浮動(dòng)布局
4. 浮動(dòng)元素的寬度、高度自適應(yīng)，但可以設(shè)置其值。
二、核心解決的問(wèn)題
文字圍繞圖片：img標(biāo)簽與多個(gè)文本標(biāo)簽放置在一個(gè)容器中，如果img浮動(dòng)，文本標(biāo)簽會(huì)圍繞圖片。
| <img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt=""> <p>001文件內(nèi)容文件內(nèi)容文內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文內(nèi)容文件內(nèi)容文件內(nèi)容<br/> <p>p標(biāo)簽文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文容文件內(nèi)容文件內(nèi)容文件內(nèi)容</p> <div>Div標(biāo)簽文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容</div> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件件內(nèi)容文件內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)容文件內(nèi)內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件容文件內(nèi)容文件內(nèi)容<br/> 文件內(nèi)容文件內(nèi)容文件內(nèi)容文件容文件內(nèi)容文件內(nèi)容<br/> </p> |
2.1 這是一個(gè)問(wèn)題
浮動(dòng)元素與正常元素相鄰，且浮動(dòng)元素與正常元素之間沒(méi)有清除浮動(dòng)，此時(shí)正常元素會(huì)被浮動(dòng)元素蓋住，但包含的內(nèi)容會(huì)圍繞浮動(dòng)元素顯示。
| <div style="width: 100px; height: 200px; background: red;float: left;" >001</div> <div style="width: 100px; height: 200px; background: gray;float: none;" ><p>002</p></div> |
001浮動(dòng)，002沒(méi)有浮動(dòng)，但002元素本身被001蓋住，但內(nèi)容卻圍繞001顯示。
三、非核心且主要應(yīng)用領(lǐng)域
分欄布局：讓區(qū)塊先水平排列，然后超出部分另起一行。
主要特點(diǎn)
1.父級(jí)高度塌陷（這也是一個(gè)嚴(yán)重的問(wèn)題）
