BFC详解【CSS面试题】
BFC是什么?
? ? ? ? ? ? ? ? BFC是元素的隱藏屬性,元素會(huì)變成一個(gè)獨(dú)立的布局區(qū)域,不會(huì)在布局上影響到外面的元素
? ? ? ? ? ? ? ? BFC可以理解為一個(gè)封閉的大箱子,箱子內(nèi)部的元素不會(huì)影響到外部
BFC有什么用?
? ? ? ? ? ? ? ? ? ? 1、父元素的垂直外邊距不會(huì)和子元素重疊(解決父子外邊距的問(wèn)題)
? ? ? ? ? ? ? ? ? ? 2、開(kāi)啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋
? ? ? ? ? ? ? ? ? ? 3、開(kāi)啟BFC的元素可以包含浮動(dòng)的子元素(解決高度塌陷)
BFC如何開(kāi)啟?? ? ? ? ? ? ?
????????開(kāi)啟方式:
????????????????1、設(shè)置元素的浮動(dòng)(不推薦)
????????????????-使用這種方式開(kāi)啟,雖然可以撐開(kāi)父元素,但會(huì)導(dǎo)致父元素的寬度丟失
? ? ? ? ? ? ? ? ?而且使用這種方式也導(dǎo)致下邊的元素上移,不能解決問(wèn)題
????????????????2、設(shè)置元素為行內(nèi)塊(不推薦)
????????????????-可以解決高度丟失的問(wèn)題,但是會(huì)導(dǎo)致寬度丟失,而且會(huì)導(dǎo)致三像素的問(wèn)題
????????????????3、將overflow設(shè)置為一個(gè)非visible的值
????????????????-副作用較小,推薦使用
????????????????4、設(shè)置元素的絕對(duì)定位
? ? ? ? ? ? ? ? 絕對(duì)定位與浮動(dòng)類(lèi)似
????????????????
總結(jié)
以上是生活随笔為你收集整理的BFC详解【CSS面试题】的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 2个字符串相等 swift_Swift快
- 下一篇: htmlCSS面试题