cari
Rumahhujung hadapan webtutorial css如何理解BFC-块格式化上下文(图文)

本篇文章分享给大家的内容是关于如何理解BFC-块格式化上下文(图文),内容很详细,接下来我们就来看看具体的内容,希望可以帮助到大家。

BFC概念

BFC(block formatting context)块格式化上下文, 是Web页面块级元素布局及浮动元素彼此交互的区域。BFC是一个独立的布局环境,(实际页面渲染时是不可见的),由BFC构建的区域其内部元素的布局是不受外界的影响的,利用这个特性可用来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。在BFC中元素从顶端开始垂直地一个接一个地排列,两个元素之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级元素的垂直外边距会产生折叠。(后面详细解释)

形成BFC的条件:

1.浮动、绝对定位、fixed定位,这些方式都能让元素脱离文档流形成独立的BFC。
2.display:inline-block/table-cells/table-captions/inline-flex(非块级元素的块容器元素)
3.overflow:auto/hidden/scroll
overflow属性本身并没有什么特别之处,但是是会产生BFC创造独立布局环境,使元素不受浮动元素的影响。

使用BFC清除浮动效果示例:

2094519353-5b57ddb1b95a3_articlex.png

BFC的作用:

1.清除浮动带来的副作用(将浮动限定在BFC区域中)
2.撑开父元素(包住浮动元素) 清除浮动就是撑开父元素
3.阻止外边距合并
4.BFC独立性可用来布局

关于margin合并

margin合并出现的三个场景:

1.同一个BFC环境中,处于普通文档流中的垂直相邻元素的外边距合并。
3543052828-5b57dbbc19da2_articlex.png

2.父子元素的外边距合并。

4184429788-5b57dbe4c801e_articlex.png

3.空元素自身的外边距合并。
1366600456-5b57df1c89894_articlex.png
如果这个外边距遇到另一个元素的外边距,它还会发生合并

4280546886-5b57dbfeec2a0_articlex.png

margin合并规则:

1.两个margin都是正值的时候,取两者的最大值;
2.当 margin 都是负值的时候,取的是其中绝对值较大的,然后,从0位置,负向位移;
3.当有正有负的时候,先取出负 margin 中绝对值中最大的,然后和正 margin 值中最大的 margin 相加。
所有毗邻的margin要一起参与运算,不能分步进行。

阻止相邻元素外边距合并的方法:

1.被非空内容、padding、border 或 clear 分隔开。
2.不在一个普通流中或用BFC分割开。
3.让margin在垂直方向上不毗邻。

相关推荐:

css关于浏览器兼容问题的解析

关于css响应式的实现代码及效果

Atas ialah kandungan terperinci 如何理解BFC-块格式化上下文(图文). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Berita Platform Mingguan: Aplikasi Web di Kedai Galaxy, Cerita Tappable, CSS SubgridBerita Platform Mingguan: Aplikasi Web di Kedai Galaxy, Cerita Tappable, CSS SubgridApr 14, 2025 am 11:20 AM

Dalam roundup minggu ini: Firefox Gains Locksmith seperti kuasa, Samsung ' s Galaxy Store mula menyokong aplikasi web progresif, subgrid CSS adalah penghantaran di Firefox

Kekuatan (dan keseronokan) skop dengan sifat tersuai CSSKekuatan (dan keseronokan) skop dengan sifat tersuai CSSApr 14, 2025 am 11:11 AM

Anda mungkin sudah sekurang -kurangnya sedikit biasa dengan pembolehubah CSS. Jika tidak, inilah gambaran keseluruhan dua saat: mereka benar-benar dipanggil sifat tersuai, anda menetapkan

Kami adalah pengaturcaraKami adalah pengaturcaraApr 14, 2025 am 11:04 AM

Laman web bangunan adalah pengaturcaraan. Menulis HTML dan CSS adalah pengaturcaraan. Saya seorang pengaturcara, dan jika anda ' di sini, membaca css-tricks, kemungkinan anda '

Bagaimana anda mengeluarkan CSS yang tidak digunakan dari laman web?Bagaimana anda mengeluarkan CSS yang tidak digunakan dari laman web?Apr 14, 2025 am 10:59 AM

Di sini ' s Apa yang saya suka untuk mengetahui pendahuluan: Ini adalah masalah yang sukar. Sekiranya anda mendarat di sini kerana anda berharap dapat menunjuk pada alat yang boleh anda jalankan

Pengenalan kepada API Web Picture-in-PicturePengenalan kepada API Web Picture-in-PictureApr 14, 2025 am 10:57 AM

Picture-in-Picture membuat penampilan pertamanya di web di pelayar safari dengan pembebasan macos Sierra pada tahun 2016. Ia memungkinkan pengguna untuk muncul

Cara untuk mengatur dan menyediakan imej untuk kesan kabur menggunakan GatsbyCara untuk mengatur dan menyediakan imej untuk kesan kabur menggunakan GatsbyApr 14, 2025 am 10:56 AM

Gatsby melakukan pemprosesan kerja yang hebat dan mengendalikan imej. Contohnya, ia membantu anda menjimatkan masa dengan pengoptimuman imej kerana anda tidak perlu secara manual

Oh hei, peratusan padding didasarkan pada elemen induk ' s lebarOh hei, peratusan padding didasarkan pada elemen induk ' s lebarApr 14, 2025 am 10:55 AM

Saya belajar sesuatu mengenai padding berasaskan peratusan hari ini bahawa saya benar-benar salah di kepala saya! Saya selalu menganggap bahawa padding peratusan berdasarkan

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

VSCode Windows 64-bit Muat Turun

VSCode Windows 64-bit Muat Turun

Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna