這里是一個段落
CSS的浮動及其在布局中的應(yīng)用
CSS浮動是什么
CSS中浮動屬性(float)設(shè)計的初衷是為了解決頁面展示樣式時需要文字環(huán)繞圖片的場景；類似于Word中的文字環(huán)繞屬性，基礎(chǔ)使用場景如下:
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比下城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式下城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋下城地區(qū)。費用合理售后完善，十年實體公司更值得信賴。
浮動前:
浮動后:
代碼實現(xiàn)如下(簡化版)
xxx
浮動帶來的問題--高度塌陷
由于設(shè)置了float后元素脫離了標(biāo)準(zhǔn)流，從而導(dǎo)致了高度的塌陷，這里有一個很直觀的例子
浮動前
浮動后
高度塌陷帶來的問題
當(dāng)出現(xiàn)高度塌陷后原本想放在下面的元素會自動向上補充，出現(xiàn)這種結(jié)果
演示代碼
如何解決塌陷--清除浮動
清除浮動主流方法有兩種:1）使用clear屬性清除浮動；2）新建BFC
利用clear屬性
方式一：在設(shè)置float的兄弟元素最后設(shè)置一個元素，對其設(shè)置clear屬性，如下
這里是一個段落
方式二：
方式一的缺點還是很明顯的，就是平白無故的新增了一個沒有內(nèi)容的元素，使頁面出現(xiàn)冗余；這里可以利用偽元素來達(dá)到同樣的效果
main::after{
content:"";
display:table;
clear:both;
}清除浮動后的效果
新建BFC
該方法的原理是：父元素在新建一個 BFC 時，其高度計算時會把浮動子元素的包進(jìn)來。那么如何新建一個BFC呢
根元素或其它包含它的元素
浮動 (元素的 float 不是 none)
絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 inline-blocks (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認(rèn)屬性)
表格標(biāo)題 (元素具有 display: table-caption, HTML表格標(biāo)題默認(rèn)屬性)
塊元素具有overflow ，且值不是 visible
display: flow-root
雖然有這么多方法可用，可我們常用的就是 overflow: hidden
main{
overflow:hidden;
}也可以達(dá)到清除浮動的效果
float在布局中的使用
float元素設(shè)計的初衷雖然是文字環(huán)繞圖片,但是目前其最廣泛的應(yīng)用卻是在布局領(lǐng)域，下面除了介紹如何應(yīng)用在布局外，還會介紹幾種常見的float布局方式，下面給出了最簡單的流式布局樣式
1.傳統(tǒng)流式布局
每個div默認(rèn)占據(jù)一行，不論寬度都會占滿此行；float布局的核心思想就是怎么把這些一行一行的數(shù)據(jù)給他以美觀的方式呈現(xiàn)出來
代碼演示
div1
div2
div3
div4
2.我們將div2設(shè)置為懸浮后會發(fā)生什么
為什么會出現(xiàn)這種情況呢?div3莫名其妙的變短了?
其實并不是div3變短了，而是div2設(shè)置浮動后脫離了頁面的流，懸浮在了其他元素的上面，而div2脫離后div3自然的向上補充，帶著div4整體上移，又被div2擋住了一部分所以出現(xiàn)了上圖中的情況，對比看一下div2右浮動就比較清晰了
3.再將div3懸浮后會發(fā)生什么
同理，這里div2 div3脫離標(biāo)準(zhǔn)流并懸浮其上,組成了一個新的層次；div4直接上移，部分被di2和div3所遮擋
4.基礎(chǔ)原理大概介紹完畢，那么如何利用float將上面的代碼構(gòu)造出美觀的效果呢
代碼示例(為了美觀做了部分調(diào)整，關(guān)注重點即可)
div2
div1
div3
div4
最終樣式如下，是網(wǎng)頁中非常常見的三列布局方式
這里介紹了CSS浮動的基本知識，由于篇幅原因有些比較基礎(chǔ)細(xì)致的知識沒有包含，大家感興趣可以自己學(xué)習(xí)下!
下面一篇博客會有具體的例子供大家參考，有需要的可以看下
分享題目：CSS的浮動及其在布局中的應(yīng)用
網(wǎng)頁路徑：http://m.jiaotiyi.com/article/igpego.html