BFC: Bối Cảnh Định Dạng Khối (Block Formatting Context)

BFC là một phần của quá trình hiển thị CSS trên trang web, là khu vực tạo ra các hộp cấp khối trong quá trình bố cục, và cũng là khu vực giới hạn tương tác giữa các phần tử nổi (float) và các phần tử khác.

BFC là một môi trường bố cục độc lập, có thể hiểu như một container, trong đó các phần tử được sắp xếp theo một quy tắc nhất định và không ảnh hưởng đến các phần tử trong các môi trường khác.

(Nếu một phần tử đáp ứng điều kiện kích hoạt BFC, thì bố cục của các phần tử bên trong BFC sẽ không bị ảnh hưởng bởi yếu tố bên ngoài).

Điều kiện nào tạo ra BFC?

1. Phần tử có float: left | right | inherit (ngoại trừ none)
2. Position: absolute hoặc fixed
3. Display: inline-block | inline-flex | table-cell
4. Overflow: hidden | auto | scroll (ngoại trừ visible)

Đặc điểm của BFC:

1. BFC là một container độc lập, các phần tử con bên trong không ảnh hưởng đến các phần tử bên ngoài
2. Khu vực của BFC không chồng lấn với khu vực của phần tử float
3. When tính chiều cao của BFC, các phần tử float cũng được tính vào
4. Khoảng cách theo phương thẳng đứng được xác định bởi margin
5. Các Box bên trong được đặt theo phương thẳng đứng, nối tiếp nhau

Ví dụ:

Khu vực của BFC không chồng lấn với phần tử float, sử dụng overflow:hidden để giải quyết

<div class="cot1"></div>
<div class="cot2"></div>

.cot1 {
    width: 200px;
    height: 200px;
    margin-right: 12px;
    background: orangered;
    float: left;
}
.cot2 {
    width: 100%;
    height: 200px;
    background: yellow;
    /* overflow: hidden; /* Tạo BFC */
}

Trước và sau khi sử dụng overflow:hidden:

Sau khi sử dụng:

Biên ngoài bị chồng chéo (Margin Collapse)

<div class="ngoai">
    <div class="hop1"></div>
    <div class="hop2"></div>
</div>

.ngoai {
    width: 100px;
    height: 100px;
    background: deeppink;
}
.hop1 {
    height: 30px;
    margin: 10px 0;
    background: orange;
}
.hop2 {
    height: 30px;
    margin: 30px 0;
    background: orange;
}

Vì margin theo chiều dương sẽ bị chồng chéo, nên khoảng cách giữa hai hộp là 30px thay vì 40px.

Giải pháp: Đặt một trong các hộp vào bên trong một container BFC

<div class="ngoai">
    <div class="hop1"></div>
    <div class="noi dung">
        <div class="hop2"></div>
    </div>   
</div>

.noi dung {
    overflow: hidden;
}

Các Box bên trong được đặt theo phương thẳng đứng, nối tiếp nhau

<div class="bao">
    <div class="mon mon1"></div>
    <div class="mon mon2"></div>
    <div class="mon mon3"></div>
    <div class="mon mon4"></div>
</div>

.bao {
    /* position: absolute; /* Tạo BFC */
    height: auto;
    background: gray;
}
.mon {
    height: 30px;
}
.mon1 {
    width: 200px;
    background: deepskyblue;
}
.mon2 {
    width: 100px;
    background: yellow;
    float: left;
}
.mon3 {
    width: 300px;
    background: pink;
}
.mon4 {
    width: 400px;
    background: brown;
}

Các Box bên trong được đặt theo phương thẳng đứng, nối tiếp nhau, kể cả các phần tử float. Phần tử float vẫn được đặt tiếp nối theo chiều dương so với hộp trước đó. Và tất cả các hộp đều được căn trái.