在網頁開發中，很多時候我們會遇到一些奇怪的問題，比如元素排列錯亂、高度不充足等情況。其中，CSS的BFC（Block Formatting Context）效果就可以解決這些問題。

BFC是指塊級格式化上下文，是一種與塊盒子相關的渲染模式。通過創建BFC，可以影響元素的布局和浮動，從而達到想要的效果。

// 創建BFC的方法：
// 1. float屬性不為none
// 2. position屬性為absolute或fixed
// 3. display屬性為inline-block、table-cell、flex等
// 4. overflow屬性不為visible
.bfc {
overflow: hidden; // 創建BFC
}

BFC的效果主要有以下幾點：

1. 清除浮動

.clearfix::after {
content: "";
clear: both;
display: table;
}

2. 避免元素溢出

.container {
overflow: hidden; // 避免子元素溢出
}

3. 防止垂直外邊距重疊

.container {
overflow: auto; // 防止垂直外邊距重疊
}

4. 實現兩欄布局

.left {
float: left;
width: 50%;
}
.right {
overflow: hidden;
}

總之，BFC可以讓我們更好地控制元素的布局和表現形式，值得我們在開發中多多使用。