CSS—清除浮動和BFC

清除浮動的常用三種方式
一时甚、clear:both /left? /right? /none? /inherit
分別代表在元素左右兩側(cè)不允許出現(xiàn)浮動元素/左側(cè)不允許出現(xiàn)浮動元素/右側(cè)不允許出現(xiàn)浮動元素/不清除浮動/繼承父元素的值
這只是清除了浮動對于兄弟元素的影響

二哈踱、overflow:hidden / auto
在浮動元素的父元素上設(shè)置了 overflow 的值為 hidden 或 auto ,可以閉合浮動刀诬。
清除浮動對父元素的影響

三邪财、:after 偽元素


這個辦法不但完美兼容主流瀏覽器,并且也很方便糠馆,使用重用的類怎憋,可以減輕代碼編寫,另外網(wǎng)頁的結(jié)構(gòu)也會更加清晰。
具體參考:kayosite.com/remove-floating-style-in-detail.html?


BFC
一. BFC 是什么耽装?
簡單來說期揪,BFC 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用

具有 BFC 的元素可以看作是隔離了的獨(dú)立容器凤薛,容器里面的元素不會在布局上影響到外面的元素缤苫,并且 BFC具有普通容器沒有的一些特性,例如可以包含浮動元素活玲,上文中的第二類清除浮動的方法(如 overflow 方法)就是觸發(fā)了浮動元素的父元素的 BFC,使到它可以包含浮動元素镀钓,從而防止出現(xiàn)高度塌陷的問題镀迂。

二.如何觸發(fā) BFC

上面介紹了 BFC 的定義,那么如何觸發(fā) BFC 呢探遵?

滿足下面任一條件的元素,會觸發(fā)為 BFC :

浮動元素涯穷,float 除 none 以外的值
絕對定位元素规哪,position(absolute,fixed)
display 為以下其中之一的值 inline-blocks蝠嘉,table-cells杯巨,table-captions
overflow 除了 visible 以外的值(hidden,auto服爷,scroll)

三. BFC 的特性

從整體上看获诈,BFC 是隔離了的容器心褐,這個具體可以表現(xiàn)為三個特性:

1. BFC 會阻止外邊距折疊(margin collapse)

2. BFC 可以包含浮動的元素

3. BFC 可以阻止元素被浮動元素覆蓋

具體參考:kayosite.com/block-formatting-contexts-in-detail.html?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末逗爹,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子挟冠,更是在濱河造成了極大的恐慌袍睡,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件控淡,死亡現(xiàn)場離奇詭異伪窖,居然都是意外死亡居兆,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門簇宽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來吧享,“玉大人,你說我怎么就攤上這事钞它∈獗蓿” “怎么了?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵锯仪,是天一觀的道長趾盐。 經(jīng)常有香客問我庶喜,道長,這世上最難降的妖魔是什么久窟? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任斥扛,我火速辦了婚禮,結(jié)果婚禮上犹赖,老公的妹妹穿的比我還像新娘峻村。我一直安慰自己,他們只是感情好粘昨,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布张肾。 她就那樣靜靜地躺著芭析,像睡著了一般馁启。 火紅的嫁衣襯著肌膚如雪芍秆。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天霉颠,我揣著相機(jī)與錄音荆虱,去河邊找鬼。 笑死怀读,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的不从。 我是一名探鬼主播犁跪,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼歹袁,長吁一口氣:“原來是場噩夢啊……” “哼寝优!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起孟抗,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤钻心,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后摊沉,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痒给,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年尼斧,在試婚紗的時候發(fā)現(xiàn)自己被綠了试吁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡律秃,死狀恐怖治唤,靈堂內(nèi)的尸體忽然破棺而出糙申,到底是詐尸還是另有隱情,我是刑警寧澤缕陕,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布疙挺,位于F島的核電站,受9級特大地震影響蔬崩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜沥阳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一桐罕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧功炮,春花似錦、人聲如沸薪伏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽眶掌。三九已至,卻和暖如春即寒,著一層夾襖步出監(jiān)牢的瞬間召噩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工凹嘲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留构韵,地道東北人周蹭。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓疲恢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親显拳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案矛绘? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • 一刃永,浮動元素有什么特征?對父容器囚玫、其他浮動元素、普通元素抓督、文字分別有什么影響? 浮動模型是一種可視化格式模型束亏,浮動...
    DeeJay_Y閱讀 874評論 0 4
  • 浮動,從誕生那天起定铜,它就是個特別的屬性——既為網(wǎng)頁布局帶來新的方法怕敬,卻又隨之產(chǎn)生一系列的問題揣炕。當(dāng)然东跪,隨著時間的推移...
    郝特么冷閱讀 842評論 0 6
  • relative:生成相對定位的元素虽填,通過top,bottom,left,right的位置相對于其正常位置進(jìn)行定位...
    zx9426閱讀 943評論 0 2
  • 1. 浮動元素有什么特征?對父容器牲览、其他浮動元素、普通元素竭恬、文字分別有什么影響? 特征:浮動元素不在普通的文檔流中...
    在乎者也閱讀 1,178評論 0 1