>[danger]什么是BFC >[info]技術詳解 BFC（Block Formatting Context）是 CSS 中一個很重要的概念。它是指一個塊級容器，其中的元素按照特定規則布局和渲染，同時也影響著其內部和外部元素的布局。 BFC 特點： 1. BFC 內部的元素會按照垂直方向一個接一個地排列，并且在水平方向上占據整個父容器的寬度。 2. BFC 內部元素的 margin 和 padding 不會與外部元素共享邊框，而是互相獨立，不會發生重疊。 3. 如果兩個相鄰的塊級元素都屬于同一個 BFC，那么它們之間的 margin 會產生折疊，即取兩個 margin 的最大值作為最終的 margin 值。 4. BFC 可以包含浮動元素，并防止浮動元素溢出到容器外面。 5. BFC 內部的第一個子元素或最后一個子元素，可以通過設置 clear 屬性來清除浮動。 如何創建BFC？ 1. 使用 float 屬性：給元素添加 float 屬性可以使其成為一個 BFC。 2. 使用 position 屬性：將元素使用 position 屬性設置為 absolute 或 fixed 時，也可以使其成為一個 BFC。 3. 使用 display 屬性：給元素添加 display 屬性設置為 inline-block、table-cell、table-caption 等值，也可以變成 BFC。 4. 設置 overflow 屬性：將元素的 overflow 屬性設置為 auto、scroll 或 hidden，也可以創建一個 BFC。 應用場景： 1. 清除浮動：當一個父容器包含多個浮動元素時，可以將其設置為 BFC，防止浮動元素溢出到外面。 2. 解決 margin 重疊問題：當兩個元素的 margin 發生重疊時，可以將其中之一包裹在一個 BFC 中，使其 margin 與外部元素分離。 3. 實現多列布局：使用 column-count 和 column-gap 屬性可以讓文本內容自動分為多列，但這需要在 BFC 中實現。 總結 BFC 是 CSS 中的一個重要概念，它對于頁面布局及解決一些常見問題非常有幫助。了解 BFC 的概念、特點和創建方式，能夠更好地掌握其應用場景，提高開發效率和代碼質量。