1樓：雷池彼岸
一口氣看下來，發現2個地方大佬們說的有點不夠準確：
1，乙個 block-level element ('display' 屬性值為 'block', 'list-item' 或是 『table』) 會生成乙個 block-level box
糾正：不止乙個，首先所有塊級元素（block-level element）都會生成乙個主盒子（principal block-level box）這沒有疑問，但是某些塊級元素，在生成主盒子的同時，還會額外生成一些其他附加盒子（additional boxes），乙個塊級元素能生成幾個塊盒子，取決於display的值，例如li標籤，display值是list-item，該元素在生成乙個主盒子的同時，還會生成乙個marker box盒子。
2，overflow不為visible的元素會生成BFC。
糾正：並不是所有元素的overflow設定visible就能生成BFC，僅限block boxs（Visual formatting model），inline不可以，比如span。
另外還要排除body元素，因為body元素作為文件根元素html的第乙個子元素，其單獨設定overflow的值會被傳遞給viewport（在html的overflow為預設visible的情況下,Visual effects），這時候body生成不了BFC，body要通過overflow的方式生成BFC，必須要同時顯式的宣告html的overflow屬性不為visible。
2樓：小潑墨
9.2.1 Block-level elements and block boxesBlock-level elements are those elements of the source document that are formatted visually as blocks (e.
g., paragraphs). The following values of the 'display' property make an element block-level:
'block', 'list-item', and 'table'.
Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme. Some block-level elements may generate additional boxes in addition to the principal box:
'list-item' elements. These additional boxes are placed with respect to the principal box.
Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes.Not all block container boxes are block-level boxes:
non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes. Block-level boxes that are also block containers are called block boxes.w3.
org/TR/CSS2/visuren.
html#box-gen
3樓：張克軍
想想瀏覽器怎麼把乙個元素「畫」出來，至少要知道定位和尺寸。定位有三種normal flow, floats和absolute，無論屬於哪種首先要找所在的containing block(我翻譯為容器塊)，相當於乙個大箱子裡擺很多小盒子，小盒子怎麼擺取決於大箱子。
怎麼確定乙個元素的containing block，由position屬性確定：
1. static(預設的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block
block formatting context(塊級格式化上下文)是一種布局特性，還是往箱子裡放東西，bfc可以理解為打了"隔板"把一組小盒子分離開。
「block-level box一定會產生block formatting context」是錯誤的，block-level box須通過設定如overflow不為visible(IE6/7無效，可以設zoom)、float不為none等等來建立block formatting context。
觸發了bfc的block level box，沒有margin callapse的問題，並且邊緣不會和float box的邊緣重疊，利用它可以清浮動。
頁面上任何乙個元素都可以看成box，box分block-level，inline-level和匿名的。
4樓：
受邀答。
你需要對web標準進行系統的了解，具體請參考「說說標準系列」文章http://
topic.csdn.net/u/20100705/09/40918be9-bb47-4477-abf0-a45801f9df34.html?93428
，文章中對你提出的這幾個問題都有詳細的解說。
請大神指導CSS中visibility和display還有overflow隱藏的區別？
張鑫旭 CSS世界 這本書P296有對visibility隱藏和display隱藏區別的詳細介紹。目前已有的部分回答正好印證了第一段的描述 有一些人簡單地認為 實際上，visibility和display隱藏區別我所知道的還有其他三個 1.繼承性 2.CSS計數器 3.transition過渡 DO...
CSS 定位體系中的 Normal flow 應該如何翻譯比較好？
丁小倪 感謝一絲胸這麼看得起我的英語水平，但其實我的英文很爛。直譯的話通常可譯為 正常流 常規流 稱之為 普通流 或 常規流 是因為這是相對於浮動和絕對定位的乙個概念，浮動和絕對定位元素都脫離了當前的常規流。可以參考w3help的定位體系概述 http w3help.org zh cn kb 009...
如何看待 CSS 中 BEM 的命名方式？
CSS 本來是一種非結構化的東西，無章可循，亂七八糟。而 BEM 是一種方式把 CSS 給結構化了，雖然這種方式也是槽點很多。但是 無論多槽點，最終結果是 CSS 結構化了。計算機這個東西就是有這麼個毛病或者好處，專吃結構化的資料，非結構化的早晚生亂。 獵人雷靈 BEM寫久了容易變成強迫症，今天覺得...