BFC adalah kawasan susun atur bebas di CSS, digunakan untuk mengawal susunan elemen dan mengasingkan kesan susun atur dalaman dan luaran. Fungsi dan kaedah penciptaannya adalah seperti berikut: 1. Selesaikan masalah margin bertindih, elakkan margin penggabungan dengan membahagikan unsur -unsur ke BFC yang berbeza; 2. Kosongkan kesan terapung, supaya bekas induknya membungkus unsur -unsur kanak -kanak yang terapung; 3. Melaksanakan susun atur dua lajur adaptif, dan gunakan limpahan: tersembunyi dan ciri-ciri lain untuk menjadikan sidebar dan kawasan kandungan tidak mengganggu satu sama lain; 4. Mengasingkan susun atur dalaman tanpa terjejas oleh pengaruh luaran, meningkatkan kejelasan struktur dan kawalan. Cara biasa untuk membuat termasuk menetapkan limpahan, menggunakan kedudukan terapung, mutlak, blok sebaris, flex, atau susun atur grid.

Konteks pemformatan blok (BFC) CSS adalah konsep asas tetapi mudah diabaikan dalam susun atur front-end. Memahami ia dapat membantu anda mengawal dengan lebih baik bagaimana elemen halaman diatur, terutamanya apabila berurusan dengan isu -isu seperti terapung, margin bertindih, dll.

Apa itu BFC?

BFC adalah kawasan rendering bebas di mana unsur-unsur peringkat blok dibentangkan mengikut peraturan tertentu dan tidak akan menjejaskan susun atur unsur-unsur luaran. Anda boleh membayangkannya sebagai "pesona". Tidak kira berapa unsur dalam pesona ini disiksa, mereka tidak akan menjejaskan dunia luar.

Cara biasa untuk membuat BFCS termasuk:

• Tetapkan nilai overflow kepada nilai yang tidak visible seperti auto , hidden , dll.
• Gunakan Float ( float tidak none )
• Elemen kedudukan mutlak ( position adalah absolute atau fixed )
• Unsur Blok Baris ( display: inline-block )
• Kotak elastik ( display: flex ) atau susun atur grid ( display: grid )

Apakah masalah praktikal yang dapat diselesaikan oleh BFC?

Mencegah margin bertindih

Dalam aliran dokumen biasa, margin atas dan bawah dua elemen peringkat blok bersebelahan akan digabungkan. Kadang -kadang ini bukan kesan yang kita mahukan. Sebaik sahaja kedua -dua elemen ini berada dalam BFC yang berbeza, margin mereka tidak akan bertindih.

Sebagai contoh, anda mempunyai struktur seperti ini:

 <div class = "box1"> box 1 </div>
<div class = "box2"> box 2 </div>

Jika .box1 dan .box2 berada dalam BFC yang sama dan kedua-duanya mempunyai set margin-top, gabungan margin mungkin berlaku di antara mereka. Tetapi jika anda membuat BFC baru untuk salah satu bekas induk, masalah ini boleh dielakkan.

Membersihkan kesan terapung

Unsur terapung akan memisahkan aliran dokumen, menyebabkan bekas induknya runtuh tinggi. Tetapi dalam bekas BFC, ia juga termasuk unsur -unsur terapung dan secara automatik memanjangkan ketinggian.

Sebagai contoh: Div mengandungi beberapa terapung: elemen kanak -kanak kiri. Sekiranya div induk tidak membentuk BFC, ketinggiannya boleh menjadi 0. Hanya tetapkan overflow: hidden atau cara lain untuk mencetuskan BFC, supaya bekas induk dapat membungkus unsur -unsur terapung dengan betul.

Susun atur dua lajur menyesuaikan diri

Menggunakan ciri -ciri BFC, mudah untuk merealisasikan lebar tetap di sebelah kiri dan susun atur penyesuaian di sebelah kanan.

Sebagai contoh, di sebelah kiri adalah bar menu terapung, dan di sebelah kanan adalah kawasan kandungan. Kandungan di sebelah kanan hanya perlu hanya menetapkan overflow: hidden untuk mengisi ruang yang tinggal secara automatik dan tidak akan bertindih dengan unsur -unsur terapung.

Bilakah anda harus mempertimbangkan menggunakan BFC?

• Apabila anda menjumpai margin muncul gabungan yang tidak dijangka
• Unsur terapung menyebabkan kekeliruan susun atur atau keruntuhan ketinggian elemen induk
• Mahu dengan cepat melaksanakan susun atur dua lajur yang sederhana
• Susun atur elemen dalaman perlu diasingkan dan tidak mahu terjejas secara luaran

Pada dasarnya adegan ini. Walaupun BFC kelihatan sedikit abstrak, ia sebenarnya alat, dan ia dapat menjimatkan banyak masalah jika digunakan dengan baik. Untuk menguasainya, tidak perlu menghafalnya, kunci adalah untuk memahami mekanisme tindakannya dalam situasi yang berbeza.

Atas ialah kandungan terperinci Memahami konteks pemformatan blok CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!