P100?BFC

筆記心得體悟

在學(xué)習(xí)了浠浠老師的關(guān)于BFC講解的介紹后，讓我對(duì)BFC的概念和規(guī)則有了一個(gè)很深的理解，下面就讓我來對(duì)其進(jìn)行一個(gè)總結(jié)：

一、首先，我們得理解何為bfc?

bfc是全稱（Block Formatting Content）英文的縮寫，中文意思的塊級(jí)格式化上下文，這是只有塊級(jí)元素才能參與的格式化上下文。

二、其次我們要知道使用bfc的原因

當(dāng)我們?cè)跁鴮慶ss樣式的過程中會(huì)遇到上下相鄰塊元素的垂直邊距合并或者嵌套塊元素的垂直邊距合并以及外邊距溢出的問題 ，使用bfc可以解決這一問題

三、接下來，我們得了解bfc的使用規(guī)則

bfc區(qū)域與外界毫不相關(guān)，bfc區(qū)域之間互相獨(dú)立不受影響，瀏覽器計(jì)算高度時(shí)會(huì)計(jì)算bfc區(qū)域里浮動(dòng)元素的高度，解決了高度自適應(yīng)時(shí)高度塌陷的問題，并且bfc區(qū)域不和浮動(dòng)元素相重疊。

四、最后我們要了解該如何觸發(fā)bfc規(guī)則

1.給元素添加display:inline-block/fixed/inline-flex

2.給元素添加浮動(dòng)float:left/right

3.overflow:hidden/scoll/auto

4.給元素添加定位position:absolute/fixed

由此可見BFC是一個(gè)很好的解決方案。但BFC也有缺陷，BFC 可能會(huì)導(dǎo)致布局問題。例如，當(dāng)一個(gè)元素被包含在一個(gè) BFC 中時(shí)，它可能會(huì)被迫變窄以避免與浮動(dòng)元素重疊。這可能會(huì)導(dǎo)致布局問題，尤其是當(dāng) BFC 中的元素需要占據(jù)特定的寬度時(shí)；BFC 可能會(huì)導(dǎo)致內(nèi)容溢出。由于 BFC 中的元素不會(huì)影響外部元素，因此如果 BFC 中的內(nèi)容過長(zhǎng)，它可能會(huì)溢出容器而不會(huì)影響外部布局。這可能會(huì)導(dǎo)致內(nèi)容被截?cái)嗷蛘卟豢梢姟?/p>

?