tag bfc

標籤
貢獻24
85
05:34 PM · Nov 05 ,2025
xingheng 頭像 jackysummer 頭像 steven_code 頭像 jingzhexiaoyu 頭像 kuijinbidada 頭像 _607c00baa52ff 頭像 yumengzhong2010 頭像 zhengcaiyunqianduantuandui 頭像 heath_learning 頭像 sctec 頭像 hai2007 頭像 minnanitkong 頭像

@bfc / 博客 RSS 訂閱

minnanitkong 頭像

王大冶 - 理解 CSS 佈局和 BFC

個人專欄 ES6 深入淺出已上線，深入ES6 ，通過案例學習掌握 ES6 中新特性一些使用技巧及原理，持續更新中，←點擊可訂閲。 點贊再看，養成習慣 本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點複習，希望我們一起有點東西。 為了保證的可讀

程序 , bfc , Css , 前端

收藏 評論

ranck 頭像

張儀ranck - 幾句話説清楚BFC

BFC是什麼 BFC是 塊 格式化 上下文的縮寫， 他會創建一個獨立渲染的區域； 怎麼創建 body元素自帶 overflow hidden auto scroll position absolute fixed float 除了none之外的其他屬性 flex table系列 網格佈局，多列布局等 用途 避免元素之間的外邊框摺疊 清除子元素浮動 清除兄弟節點浮動環

bfc , Css , 前端

收藏 評論

beckyyyy 頭像

beckyyyy - 對BFC的理解

在前端的面試中，相對JavaScript而言，CSS佈局方面考察的內容會相對少一些，其中BFC是佈局樣式方面常考的一個考點。 什麼是BFC BFC，全稱為Block Formatting Context，翻譯過來即塊格式化上下文。 之前在其他文章中看到的説明是，網頁上一個獨立且隔離的渲染區域。現在呢，我稍微查閲了一些官方的信息。 在瞭解BFC之前，我們需要先了解一些其他概念： 包含塊（contai

佈局 , bfc , Css , HTML , 前端

收藏 評論

compose_hub 頭像

compose_hub - CSS中的FC到BFC

本文首發國內開源代碼託管平台Gitee 文章地址： https://gitee.com/gooder4j/compose-hub/issues/I4U78Q 覺得不錯的話，你的star是對我最大的支持！ Formatting Context簡單理解，就是定義了佈局規則的一片區域。它的類型包括： Block Formatting Context，簡稱BFC Inl

佈局 , css技巧 , bfc , Css , 前端

收藏 評論

ekko_5cd3886c312b8 頭像

Durant - CSS之BFC

1. BFC特性 區塊格式化上下文（Block Formatting Context，BFC）是 Web 頁面的可視 CSS 渲染的一部分，是塊級盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。 個人理解：在一個BFC區域裏，不管內部元素怎麼倒騰，始終不影響該區域外部元素。 2. 如何創建BFC 參閲MDN文檔説明： 區塊格式化上下文 3. 為何創建BFC 格式化上下文影響佈局，通常，

bfc , Css , 前端

收藏 評論

frank_5d8c4e2c487f2 頭像

frank_5d8c4e2c487f2 - 前端BFC

一、常見定位方案 在講 BFC 之前，我們先來了解一下常見的定位方案，定位方案是控制元素的佈局，有三種常見方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先後位置至上而下佈局，在這個過程中，行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染為完整的一個新行，除非另外指定，否則所有元素默認都是普通流定位，也可以説，普通流中元素的位置由該元素在 HT

bfc

收藏 評論

joytime 頭像

joytime - Html—BFC

背景 BFC，即Block Format Context，塊級格式化作用域，我們先不管它的目的是什麼，先來了解下格式化作用域的相關類型。 格式化作用域的類型 文檔流中的行內元素和塊級元素，都屬於格式化作用域，所以格式化作用域有兩種類型： 塊級格式化作用域 行內格式化作用域 格式化作用域的作用 格式化作用域，規定了當前節點內部的文檔流不受外界文檔流的影響。 （原因很簡單啊，因為除了正常

bfc

收藏 評論

hometown 頭像

HoMeTown - 【CSS】有意思的BFC：Block Formatting Context（塊格式化上下文）！

前言 大家好，我是HoMeTown，今天想聊一聊CSS中的BFC，很多朋友應該都聽過這個名詞，搞懂BFC可以讓我們理解CSS中一些很詭異的地方，話不多説，直奔主題！ 什麼是BFC BFC是什麼？引用MDN的一段介紹： 塊格式化上下文（Block Formatting Context，BFC） 是 Web 頁面的可視 CSS 渲染的一部分，是塊級盒子的佈局過程發生的區域，也是浮動元素與其他元素交

bfc , Css , 前端

收藏 評論

anetin 頭像

anetin - CSS盒模型與BFC

1.什麼是CSS盒模型 1.1 概念 每一個文檔中，每個元素都被表示為一個矩形的盒子,它都會具有內容區、padding、border、margin。盒模型分為兩種： 標準盒模型 IE盒模型(怪異盒模型) 1.2 兩種盒模型的區別： 1.標準盒模型的寬高為內容區域的寬高 2.IE盒模型則寬高為 border + padding + 內容區 1.3 CSS如何設置兩種模型 CSS3 的

bfc , Css

收藏 評論

txianzaishidongtiant 頭像

t現在是冬天t - BFC及其背後的 float absolute inline-block

BFC及其背後的 float absolute inline-block 此文為經驗之談，感謝張鑫旭大佬 張鑫旭的博客 BFC(Block formatting context) BFC(Block formatting context)直譯為"塊級格式化上下文"。 它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如

absolute , bfc , float , inline-block , Css

收藏 評論

notfoundcatalpa 頭像

Catalpa - [CSS篇]淺談BFC

概述 説到BFC，其實剛開始我也很迷，翻看了一些文檔後打算來 總結一下，首先，BFC其實就是一種佈局，説到CSS佈局，大抵也就是普通流、浮動（元素會脱離普通流）、定位（元素會脱離普通流），BFC也屬於普通流，加了BFC樣式的元素像是給元素加了個結界，結界內部的元素不會影響外面的元素，被隔離開了。 BFC規則 • BFC就是一個塊級元素，塊級元素會在垂直方向一個接一個的排列； • BFC樣式的

bfc , Css

收藏 評論

huidt 頭像

HuiDT - BFC及其作用

1.什麼是margin塌陷？ 2.為什麼塌陷時只出現在垂直方向？ 3.如何解決margin塌陷？ 4.margin合併(也叫margin摺疊) 5.浮動元素(使用BFC來包含浮動) 6.附實例 7.使用BFC來防止文字環繞 8.在多列布局中使用BFC 9.兩欄佈局 10.如何創建BFC？ 10.1.總結 11.參考 1.什麼是margin塌陷？

bfc , Css

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - 理解CSS盒模型與BFC

什麼是盒模型 一個CSS盒模型由content、border、padding、margin組成，盒模型又分為標準模型和IE模型。標準模型和IE模型區別就是就是計算盒子的寬度和高度的不同 標準模型 標準模型的寬度和高度指的是content 實際例子 style type="text/css" .box{ width: 200px; height: 200px; bor

盒模型 , bfc , 前端

收藏 評論

xingheng 頭像

邢走在雲端 - 四種方式進行清除浮動

以下展示了四種方式進行清除浮動 先看一段代碼 css .box { border: 1px solid #f00; } .fl { float: left; width: 50px; height: 50px; background: #0f0; margin: 5px; } html div class="box" div class="

bfc , 浮動 , Css

收藏 評論

hai2007 頭像

你好2007 - 關於CSS中設置overflow屬性的值為hidden的相關理解

包裹元素剪裁條件 是不是包裹元素overflow設置為hidden以後，內部元素如果超過包裹元素的話就會被剪裁？答案是不一定，這要看此刻的CSS環境。 根據對CSS2.1規範的理解，可以這樣表述：如果一個元素的包含塊的overflow屬性設置為hidden，那麼超過這個包含塊部分的內容就會被剪裁。 因此我們需要學會尋找一個元素的包含塊，不過在這之前，讓我們先簡單的知道如果一個元素的overflow

overflow , bfc , hidden , Css

收藏 評論

sctec 頭像

樑柱 - CSS 清除浮動、BFC

BFC BFC：塊級格式化上下文 BFC是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。 BFC的佈局規則 內部的Box會在垂直方向，一個接一個地放置。 Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。 計算BFC的高度時，

css3 , bfc , 清除浮動

收藏 評論

xingheng 頭像

邢走在雲端 - 通過例子講解BFC

BFC的基本概念 塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是塊盒子的佈局過程發生的區域，也是浮動元素與其他元素交互的區域。 ——來自MDN 如何創建BFC 下列方式會創建塊格式化上下文： 根元素(html) 浮動元素（元素的 float 不是 none） 絕對定位元素（元素的 position 為 ab

bfc , Css

收藏 評論

heath_learning 頭像

heath_learning - CSS BFC特性(塊級格式化上下文)

1、元素的BFC特性 BFC全稱為”Block Formartting Context”，中文為”塊級格式化上下文”。它是頁面中的一塊獨立的渲染環境，並且有一套渲染規則， 它決定了其子元素將如何定位，以及它和其他兄弟元素的關係和相互作用。 BFC佈局規則： 1）bfc內部的元素會在垂直方向，一個接一個地放置 2）盒子垂直方向的距離有margin決定，屬於同一個bfc的兩個相鄰元素的margi

css技巧 , bfc , Css , HTML

收藏 評論

zhengcaiyunqianduantuandui 頭像

政採雲前端團隊 - 政採雲前端小報第48期

政採雲前端小報第48期 瀏覽更多往期小報，請訪問： https://weekly.zoo.team 本週原創 前端工程師需要了解的 Babel 知識 基於 Vue 的商品主圖放大鏡方案 本週收集 Kubernetes 在有讚的實踐 本文分享了 Kubernetes 在有讚的實踐和演進，以及遇到的一些問題。 通過實現25個數組方法來理解及高效使用數組方法(長文,建議收藏) - 掘金 高效使用

vue.js , bfc , Javascript

收藏 評論

yumengzhong2010 頭像

於夢中2010 - 一篇文章帶拿下盒模型BFC渲染機制

走在前端的大道上 本篇將自己讀過的相關 盒模型BFC 文章中，對自己有啓發的章節片段總結在這（會對原文進行刪改）,會不斷豐富提煉總結更新。 一.常見定位方案 在講 BFC 之前，我們先來了解一下常見的定位方案，定位方案是控制元素的佈局，有三種常見方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先後位置至上而下佈局，在這個過程中，行內元素水平排列，直到當行

盒模型 , bfc , Css

收藏 評論

_607c00baa52ff 頭像

懟懟 - 【css】塊格式化上下文(BFC)

定位方式 BFC 1 定位方式 普通流/文檔流 浮動 絕對定位 1.1 普通流/文檔流 規則 元素按照其在HTML中的先後位置自上而下佈局 行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染為完整的一個新行 所有元素默認都是普通流定位 1.2 浮動 規則 元素先按照普通流的位置出現，然後根據浮動的方向儘可能向左或向右偏移 平移到容器邊框，或者碰到另外一個

bfc , float , Css

收藏 評論

kuijinbidada 頭像

葵進必達達 - 我的筆記-BFC的知識點梳理

什麼是BFC？ BFC（Block Formatting Contexts）塊級格式化上下文，它是頁面 CSS 視覺渲染的一部分， 用於決定塊級盒的佈局及浮動相互影響範圍的一個區域 。 BFC的創建 根元素（ html ） 浮動元素（ float 不為 none ） 絕對定位元素（ position 為 absolute 或 fixed ） 表格的標題和單元格（ display 為 ta

css3 , bfc , Css

收藏 評論

jingzhexiaoyu 頭像

胡斐 - CSS2中盒模型與佈局的一些概念關係

CSS的一些名詞和概念 用來幫你更明確地去描述HTML/CSS世界的事物。 box 在CSS中，一個元素就可以看作一個box。具體信息可以參考盒模型的解釋，這裏暫且不作展開。 containing blocks Box的位置和大小時根據一個稱為containing blocks的邊界進行計算的。 block-level elements 和 block boxes block-level elem

position , bfc , Css , Layout

收藏 評論

steven_code 頭像

Steven - 瞭解 BFC

對於頁面的佈局，前端開發者都大概瞭解：block元素佔據網頁一整行空間，從上到下排列；多個inline元素共享網頁一整行空間，從左到右，超出橫向空間時，則向下排列。但在開發頁面時，會經常遇到浮動高度塌陷、垂直方向上的margin重疊or溢出等場景。雖然利用CSS Hack可以快速解決問題，但其背後的原理始終沒去理解。有時候某個CSS Hack還有副作用，雖然解決了問題，但又新增了其他問題；為此還需

bfc , Css , Layout

收藏 評論