hujung hadapan web
tutorial css
Apakah BFC? Ketahui lebih lanjut tentang BFC dan bincangkan tentang peranannya
Apakah BFC? Ketahui lebih lanjut tentang BFC dan bincangkan tentang peranannya
Apakah itu BFC? Artikel berikut akan membawa anda memahami BFC dan bercakap tentang peranan BFC. Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.
Semasa saya menemu bual Byte, penemuduga bertanya kepada saya sama ada saya tahu tentang BFC saya sebenarnya membaca banyak artikel pada masa itu, tetapi saya tidak dapat ingat, saya rasa setiap artikel bercakap tentang perkara yang sama, dan saya tidak menjawabnya semasa temu bual Tetapi selepas mendengar penjelasan guru Wang Hongyuan, saya berasa tercerahkan, jadi saya ingin berkongsi dengan semua orang. Kandungan berikut adalah berdasarkan ringkasan kelas sistem bahagian hadapan cikgu Wang Hongyuan, saya rasa ia sangat jelas Terima kasih Cikgu Wang Hongyuan
Sebelum memahami BFC. (Konteks Pemformatan Blok), Mari kita lihat dahulu apakah FC (Konteks Pemformatan) itu:
Petikan ini datang dari laman web rasmi W3C. Kita boleh mendapatkan maklumat berikut:
Semua kotak milik FC
Susun atur elemen peringkat blok adalah milik BFC. Contohnya, div/p/h1, dsb. -> Reka letak
elemen peringkat sebaris dalam reka letak BFC adalah milik IFC. Contohnya, img/a/span/i ->
dalam reka letak IFC Pemahaman mudah: reka letak dan konteks di mana elemen peringkat blok terletak ialah BFC, dan reka letak dan konteks di mana elemen peringkat sebaris terletak ialah IFC
Soalan 1. Elemen peringkat blok semuanya diletakkan dalam BFC, jadi di manakah BFC ini? , mari kita lihat penjelasan rasmi dari W3C:
Mengikut situasi yang disusun di MDN, BFC akan diwujudkan: 
Root elemen (html)
- Elemen terapung (nilai apungan elemen bukan tiada)
- Elemen berkedudukan mutlak (kedudukan elemen adalah mutlak atau tetap)
- Elemen blok sebaris (elemen itu paparan ialah blok sebaris)
- Sel jadual (Paparan elemen ialah sel jadual, sel jadual HTML lalai kepada nilai ini, tajuk jadual (paparan elemen ialah kapsyen jadual, tajuk jadual HTML lalai kepada nilai ini) row, tbody, thead, tfoot atribut lalai) atau inline -table)
- elemen blok limpahan yang nilai yang dikira (Dikira) tidak kelihatan
- elemen fleksibel (paparan ialah elemen anak langsung bagi elemen flex atau inline-flex)
- elemen Grid bersih (paparan ialah elemen anak langsung bagi grid atau elemen grid sebaris)
- Elemen yang nilai paparannya ialah akar alir
- Dapat dilihat bahawa
Box1 dan box2 dalam kod ini kedua-duanya dibentangkan dalam BFC unsur akar html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
</body>
</html>Soalan 2. Peranan BFC
Pertama, lihat dokumentasi rasmi Penerangan mengenai peranan BFC:
Maklumat yang kami boleh perolehi:
- semasa susun atur kotak Dalam BFC, setiap elemen Tepi kiri of akan berhampiran dengan tepi kiri blok yang mengandungi
- Dalam BFC yang sama, dalam arah menegak, margin dua kotak bersebelahan akan bertindih, dan nilainya ialah Yang lebih besar daripada dua (anda boleh menggunakan ciri ini untuk menyelesaikan masalah pertindihan margin)
Pada masa ini, box1 dan box1 kedua-duanya berada dalam BFC html, dan box1 dan box2 bersebelahan dalam arah menegak, jadi akan terdapat pertindihan margin Ambil nilai yang lebih besar daripada kedua-duanya. 50px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>Bagaimana untuk menyelesaikannya?
Apakah hasilnya?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
overflow: hidden;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html> Didapati ia tidak berfungsi. Ramai orang mungkin keliru pada masa ini Box1 telah membentuk BFC, jadi mengapa ia masih bertindih? Izinkan saya menerangkan kepada anda Pertama sekali, box1 sememangnya telah membentuk BFC pada masa ini (ia boleh difahami sebagai BFC yang terbentuk di dalam box1), tetapi elemen box1 itu sendiri masih tergolong dalam BFC html yang sama dengan box2, jadi ia masih akan berlaku pertindihan margin
Pada masa ini, box1 adalah milik BFC daripada bekas, dan box2 milik BFC html , bukan milik BFC yang sama, jadi masalah pertindihan margin boleh diselesaikan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 给box1外层增加一个container盒子，并设置BFC */
.container {
overflow: hidden;
}
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
<div></div>
</body>
</html>作用2：解决浮动高度塌陷问题
当我们给container里面的四个item设置浮动的时候，很明显，这几个元素都会脱离文档流，此时container不会有高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
background-color: orange;
}
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
很多网上博主说，通过给container设置一个BFC，内部的浮动元素就会向其汇报高度，然后container就能解决浮动高度塌陷问题，这个做法是正确的，但是这个说法其实是错误，并不是因为其内部的浮动元素向其汇报了高度
事实上，想通过BFC解决高度塌陷问题需要满足两个条件：
浮动元素的父元素触发BFC，形成独立的块级格式化上下文(BFC)
浮动元素的父元素高度为auto
首先我们先看一段W3C的描述
大致意思为BFC的高度是auto情况下，高度是这样计算：
- 如果只有inline-level，是行高的顶部和底部的距离
- 如果有block-level，是有最底层的块上边缘和最底层块盒子的下边缘之间的距离（有margin也会计算在内）
- 如果有绝对定位元素，将被忽略（所有我们无法通过BFC解决绝对定位的高度塌陷问题）
- 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（这才是BFC能解决浮动元素塌陷问题的原因，并不是因为浮动元素向上汇报了高度）
所以我们直接给container通过添加overflow属性设置BFC，则由于上述第四条4特性，container会增加高度来包括内部四个item浮动元素下边缘，所以解决了浮动塌陷问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
background-color: orange;
/* 通过overflow形成BFC */
overflow: hidden;
}
.item {
width: 400px;
height: 200px;
box-sizing: border-box;
border: 1px solid #000;
float: left;
background-color: #f00;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
（学习视频分享：web前端入门）
Atas ialah kandungan terperinci Apakah BFC? Ketahui lebih lanjut tentang BFC dan bincangkan tentang peranannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah maksud pemegang tempat dalam vue
May 07, 2024 am 09:57 AM
Dalam Vue.js, atribut pemegang tempat menentukan teks pemegang tempat bagi elemen input, yang dipaparkan apabila pengguna belum memasukkan kandungan, menyediakan petua atau contoh input dan meningkatkan kebolehcapaian borang. Penggunaannya adalah untuk menetapkan atribut pemegang tempat pada elemen input dan menyesuaikan penampilan menggunakan CSS. Amalan terbaik termasuk relevan dengan input, pendek dan jelas, mengelakkan teks lalai dan mempertimbangkan kebolehaksesan.
Apakah maksud span dalam js
May 06, 2024 am 11:42 AM
Teg span boleh menambah gaya, atribut atau gelagat pada teks Ia digunakan untuk: menambah gaya, seperti warna dan saiz fon. Tetapkan atribut seperti id, kelas, dsb. Tingkah laku yang berkaitan seperti klik, tuding, dsb. Tandakan teks untuk pemprosesan atau petikan selanjutnya.
Apakah maksud rem dalam js
May 06, 2024 am 11:30 AM
REM dalam CSS ialah unit relatif berbanding saiz fon elemen akar (html). Ia mempunyai ciri-ciri berikut: relatif kepada saiz fon elemen akar, tidak dipengaruhi oleh elemen induk. Apabila saiz fon elemen akar berubah, elemen menggunakan REM akan melaraskan dengan sewajarnya. Boleh digunakan dengan mana-mana harta CSS. Kelebihan menggunakan REM termasuk: Responsif: Pastikan teks boleh dibaca pada peranti dan saiz skrin yang berbeza. Ketekalan: Pastikan saiz fon adalah konsisten di seluruh tapak web anda. Kebolehskalaan: Tukar saiz fon global dengan mudah dengan melaraskan saiz fon elemen akar.
Bagaimana untuk memperkenalkan imej ke dalam vue
May 02, 2024 pm 10:48 PM
Terdapat lima cara untuk memperkenalkan imej dalam Vue: melalui URL, memerlukan fungsi, fail statik, arahan v-bind dan imej latar belakang CSS. Imej dinamik boleh dikendalikan dalam sifat pengiraan atau pendengar Vue, dan alatan yang digabungkan boleh digunakan untuk mengoptimumkan pemuatan imej. Pastikan laluan adalah betul jika tidak ralat memuatkan akan muncul.
Apakah nod dalam js
May 07, 2024 pm 09:06 PM
Nod ialah entiti dalam DOM JavaScript yang mewakili elemen HTML. Ia mewakili elemen tertentu dalam halaman dan boleh digunakan untuk mengakses dan memanipulasi elemen tersebut. Jenis nod biasa termasuk nod elemen, nod teks, nod ulasan dan nod dokumen. Melalui kaedah DOM seperti getElementById(), anda boleh mengakses nod dan mengendalikannya, termasuk mengubah suai sifat, menambah/mengalih keluar nod anak, memasukkan/menggantikan nod dan nod pengklonan. Traversal nod membantu menavigasi dalam struktur DOM. Nod berguna untuk mencipta kandungan halaman, pengendalian acara, animasi dan pengikatan data secara dinamik.
Dalam bahasa apakah pemalam penyemak imbas ditulis?
May 08, 2024 pm 09:36 PM
Pemalam penyemak imbas biasanya ditulis dalam bahasa berikut: Bahasa bahagian hadapan: JavaScript, HTML, CSS Bahasa bahagian belakang: C++, Rust, WebAssembly Bahasa lain: Python, Java
Bagaimana untuk menetapkan atribut yang tidak diketahui dalam kaedah vscode vscode untuk menetapkan atribut yang tidak diketahui
May 09, 2024 pm 02:43 PM
1. Mula-mula, buka ikon tetapan di sudut kiri bawah dan klik pilihan tetapan 2. Kemudian, cari lajur CSS dalam tetingkap lompat .
Apakah yang dilakukan oleh ref dan id dalam vue?
May 02, 2024 pm 08:42 PM
Dalam Vue.js, ref digunakan dalam JavaScript untuk merujuk elemen DOM (boleh diakses oleh subkomponen dan elemen DOM itu sendiri), manakala id digunakan untuk menetapkan atribut id HTML (boleh digunakan untuk penggayaan CSS, penanda HTML dan carian JavaScript ).
