在多多老大的大力鼓舞之下↓有了今天的第一篇關(guān)于前端學(xué)習(xí)的每日一更错负。
最近忙成狗浸泡式的學(xué)習(xí) 的確非常有效 天天念叨浮動(dòng)各種特征 性質(zhì) 還有使用坟瓢，相信很快會(huì)得心應(yīng)手勇边。今天記錄下來(lái)以便多年以后查閱回顧，也分享給感興趣的你折联。
?浮動(dòng)的特性
1.使塊元素在一行顯示
2.使內(nèi)聯(lián)元素支持寬高
3.不設(shè)置寬高的時(shí)候?qū)挾扔蓛?nèi)容撐開
4.換行不被解析
5.元素添加浮動(dòng)粒褒，會(huì)脫離文檔流，按照指定的一個(gè)方向移動(dòng)诚镰，直到碰到父級(jí)的邊界或者另一個(gè)浮動(dòng)元素停止
6.阻止margin疊壓的問(wèn)題
浮動(dòng)既有天使一面奕坟，也要魔鬼一面。
為了阻止浮動(dòng)帶來(lái)的破壞性清笨，高度塌陷月杉，最近學(xué)到以下幾種常見(jiàn)解決問(wèn)題的方法：
1.父級(jí)div定義 height
缺點(diǎn)：不利于維護(hù)
在內(nèi)容不確定高度時(shí)無(wú)法使用
2.使用inline-block
缺點(diǎn)：會(huì)產(chǎn)生空間空隙
無(wú)法使用margin左右居中
3.加空標(biāo)簽
缺點(diǎn)：必須是內(nèi)聯(lián)元素
但凡使用到浮動(dòng)的時(shí)候，都需要添加空標(biāo)簽
4.以浮制浮
缺點(diǎn)：所有浮動(dòng)元素的父級(jí)都要加浮動(dòng)抠艾。
最終苛萎，加到HTML上就無(wú)法繼續(xù)清除浮動(dòng)
5.在浮動(dòng)元素后面增加<br/>標(biāo)簽
? ? ? ? <br/>標(biāo)簽有自帶的清除浮動(dòng)屬性
缺點(diǎn)：不符合W3C規(guī)范「即行為，結(jié)構(gòu)检号，樣式三者分離規(guī)范」
6.父級(jí)div定義 偽類:after
推薦使用指數(shù)：※五顆星※
更改一個(gè)可改動(dòng)多個(gè)浮動(dòng)
