BFC是什么？

? ? ? ? ? ? ? ? BFC是元素的隱藏屬性，元素會(huì)變成一個(gè)獨(dú)立的布局區(qū)域，不會(huì)在布局上影響到外面的元素

? ? ? ? ? ? ? ? BFC可以理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素不會(huì)影響到外部

BFC有什么用？

? ? ? ? ? ? ? ? ? ? 1、父元素的垂直外邊距不會(huì)和子元素重疊（解決父子外邊距的問題）

? ? ? ? ? ? ? ? ? ? 2、開啟BFC的元素不會(huì)被浮動(dòng)元素所覆蓋

? ? ? ? ? ? ? ? ? ? 3、開啟BFC的元素可以包含浮動(dòng)的子元素（解決高度塌陷）

BFC如何開啟？? ? ? ? ? ? ?

????????開啟方式：

????????????????1、設(shè)置元素的浮動(dòng)（不推薦）

????????????????-使用這種方式開啟，雖然可以撐開父元素，但會(huì)導(dǎo)致父元素的寬度丟失

? ? ? ? ? ? ? ? ?而且使用這種方式也導(dǎo)致下邊的元素上移，不能解決問題

????????????????2、設(shè)置元素為行內(nèi)塊（不推薦）

????????????????-可以解決高度丟失的問題，但是會(huì)導(dǎo)致寬度丟失，而且會(huì)導(dǎo)致三像素的問題

????????????????3、將overflow設(shè)置為一個(gè)非visible的值

????????????????-副作用較小，推薦使用

????????????????4、設(shè)置元素的絕對(duì)定位

? ? ? ? ? ? ? ? 絕對(duì)定位與浮動(dòng)類似

????????????????

總結(jié)

以上是生活随笔為你收集整理的BFC详解【CSS面试题】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。