停止濫用div! HTML語義化介紹

文同步本人掘金平臺的原創翻譯：https://juejin.cn/post/6844903817968893960

DIVS該停止（濫用）了

我們喜歡（使用）<div>標簽。它們已經存在了幾十年，這幾十年來，當需要將一些內容包裹起來達到（添加）樣式或者布局目的的時候，它們成為首選元素。查看線上站點時，看到像下面這些內容的情況依舊很常見：

<div class="container" id="header">
    <div class="header header-main">Super duper best blog ever</div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">
        Why you should buy more cheeses than you currently do
    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">
                Part 1: Variety is spicy
            </div>
            <!-- cheesy content -->
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
            <!-- more cheesy content -->
        </div>
    </div>
</div>
<div class="container" id="footer">
    Contact us!
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </p>
        <div class="street-address">
            <p>123 Main St., Suite 404</p>
            <p>Yourtown, AK, 12345</p>
            <p>United States of America</p>
        </div>
    </div>
</div>
復制代碼

Hoo，那有很多的div標簽。但是，它有效。我的意思主要是，它具有你需要的結構。并且，我確定在你完成樣式添加之后，它看起來會像你想要的那個樣子。然而，它有些嚴重的問題：

可訪問性 - 許多a11y tools非常智能，會盡力解析頁面結構，以幫助用戶按照頁面制作者的意圖來引導用戶，并為用戶提供簡單的跳轉鏈接來指引他們到自己關心的頁面部分。然而，<div>標簽并沒有真正傳遞有關文檔結構的任何有用信息。世界上最聰明的a11y tool仍然不是人類，不能指望其解析class和id屬性，或能夠識別全世界開發人員命名塊元素的奇怪和狂野的方式。我可以識別到class="article-header-level-2"是一個副標題，但是機器不能。（如果可以的話，把它從我電腦中拿出來，可我也還沒準備好進行AGI革命呢。）
可讀性 - 要閱讀此代碼，你需要仔細掃描類名，從<div class="..."></div>樣板之間挑選出來。一旦你（的代碼）深入幾個層次，跟蹤哪個</div>結束標記與哪個<div ...>開始標記對應，那就變得很棘手了。你開始非常依賴IDE功能，例如著色不同的縮進級別或突出顯示匹配的標記以跟蹤您的位置，而在較長的文檔中，它可能需要在這些功能之上進行大量的滾動。
一致性和標準 - 開始新的工作或轉移到新項目，并且必須從頭學習代碼庫中使用的讓人抓狂的標記，那可能會令人很沮喪。如果每個人都有標準化的方法來標記web文檔中常見結構，那么在不熟悉代碼庫的情況下，都可以很容易的瀏覽HTML文件并快速處理它應該展示的內容。如果只有一個這樣的標準...

HTML5: 這個標準

HTML5并不新奇。這是輕描淡寫；最初的工作草稿于2008年1月（11年前）發布，以征求公眾意見，并于4年半前，2014年10月份成為一個全面W3C的推薦。所以，就像它已經存在了一段時間。

HTML5的主要進步之一是引入了一組標準化的語義元素。術語“語義”指的是單詞或事物的含義，因此”語義元素“是用于以更有意義的方式標記文檔結構的元素，這種方式可以清楚地表明它們的用途和它們在文件中服務的目的是什么。而且重要的是，由于它們是標準化的，定義文檔的這些元素可以被每個人使用并理解，包括機器人。

我認為HTML5規范本身在<div>元素定義下的一個注釋中很好地總結了這個問題：

注釋：強烈建議作者將div元素視為最后采取的元素，在沒有其它元素適合的（情況下）。使用更合適的元素而不是div元素可以使讀者更容易訪問，并且更容易為作者提供可維護性。-- www.w3.org/TR/html5/gr…

我將語義塊元素分為兩類：主要結構和內容指標。這些不是標準的條款或者其它條款；我在這篇文章中做了一些（區分）。但我認為這種區分足夠有用。?♂?

主要結構

有一個超級常見的模式，可在互聯網上的網站，教程甚至CSS庫中找到，并且有充分的理由。我們經常將最頂層的頁面劃分為三個區域：頁眉、主頁和頁腳，然后根據需要將這些區域劃分為多個區域。我在上面的例子中包含了這個來證明這點：

<div class="container" id="header">...</div>
<div class="container" id="main">
    ...
    <div class="article-section">...</div>
    ...
</div>
<div class="container" id="footer">...</div>
復制代碼

我已經看過（并且使用過）這種模式很久了，以這種方式構造文檔非常有意義，既可以讀取HTML，又可以更加簡單地在CSS中設置頁面樣式。頁眉和頁腳元素頁可以使用PHP或Rails/ERB等語言中的部分模版來更易于使用，因為你可以在整個站點中包含常見的頁眉和頁腳部分：

<?php include 'header.php'; ?>

<div id="main">...</div>

<?php include 'header.php'; ?>
復制代碼

所以這就是事情：每個人都認為這是一個很好的模式。這包括WHATWG和W3C的人員，他們將模式標準化為HTML5中的四個新元素，名稱非常清晰：<header>, <main>, <footer>和<section>。

Bookends: <header> 和 <footer>

<header> 和 <footer>元素基本上是雙胞胎：它們在規范中的定義非常相似，并遵循相同的規則，關于它們被允許使用的位置，唯一區別在于它們的語義目的：頁眉在事物的前面，頁腳在事物的末尾。對于事物，我的意思不僅僅是頁面的：這對元素的設計用于文檔的任何部分，代表一大塊內容，具有明確的開頭和結尾。這可以包括表格，文章，文章部分，社交媒體網站上的帖子，卡片等。

頁眉和頁腳在語義上接近sectioning root或sectioning content元素。像<body>, <blockquote>, <section>, <td>,<aside>等許多其它元素；如果你想了解完整的列表，就點擊上面的鏈接。輔助技術可以使用這些元素和其它元素生成文檔大綱，這可以幫助用戶更輕松的訪問它。在每個sectioning root/content中，你不應該使用超過一個的<header>或<footer>。（一個就好，不能兩個相同）

作為最后說明，<header>經常作為其上下文保存標題元素（<h1>-<h6>）。這不是必須的，但可以幫助將其它相關元素與標題分組，比如鏈接，圖片或子標題，并且可以維持一直的結構，即使標題是<header>中的唯一元素。

好東西：<main>

第三個主要區域元素--<main>很特別。規范中說明了關于<main>的兩個非常重要的內容：

文檔的主要內容區域包括文檔的特定內容，且不包括在一組文檔中重復的內容，例如站點導航鏈接，版本信息，站點的徽標，橫幅和搜索表單（除非文檔或應用的主功能是一種搜索形式）-- www.w3.org/TR/html5/gr…

所以，<main>是你放置好東西的區域，是頁面的重要部分，特別是用戶訪問此頁面的原因（或說目的），而不是您的站點。換句話來說，主要內容。

所有其它東西，徽標、搜索表單和導航欄等都可以在<body>中的<header>或<footer>中，但是在<main>之外。

文檔中不能有多個可見的main元素。如果文檔中存在多個main元素，則必須使用隱藏屬性隱藏所有其它（main）實例。 -- www.w3.org/TR/html5/gr…

這很獨特。和<header>和<footer>（以及其它塊元素不同），<main>不能在任意切片內容的整個頁面中使用；它應該只被使用一次?；蛘吒_切地說，它可以在文檔中多次被使用，但是一次只能看到一個<main>元素，所有其它的（

）必須被使用隱藏屬性隱藏，如CSS中的display:none。如果您思考下，（你會明白）這在應用程序中預加載視圖是種很有用的模式：創建一個新的<mian hidden>，獲取用戶可能接下來查看的一些內容（例如：系列文中的下一篇，下一張幻燈圖放映等），然后，當用戶點擊鏈接/按鈕加載該視圖時，通過在兩者上切換隱藏屬性，將當前的<main>切換到預加載的（那個）。

在繼續之前，我們暫停下并查看上面的示例。如果我們使用<header>，<main>和<footer>作為文章的主要結構，它的外觀如下：

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>
復制代碼

那真的很棒！但是，還有很多工作要做。

分解：<section>

因此，我們為頁面提供了一個基本大綱：頁眉，頁腳和主要內容區域?，F在是時候添加些美妙的內容了。

通常，你會希望將你的內容分解為多個部分，尤其是對像本文這樣的大量文本內容，因為沒人喜歡閱讀這些難以理解的文本墻。

<section>派上用場了。這是在系列規則中最簡單的一個：從結構上講，它基本上只是一個具有特殊含義的<div>。一個<section>開始一個新的"sectioning content"區域，因此它可以有自己的<header>和<footer>。

那么，<section>和普通的舊<div>之間有什么區別，然后，你應該在什么時候使用它們呢？好吧，允許我再次引用規范：

筆記：
元素不是通用容器元素。當一個元素僅是用于樣式目的或為腳本編寫提供便利的時候，鼓勵作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般規則是元素僅在元素內容在文本[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)

你知道，概述來說，HTML5規范實際上是可讀的。它是那個比較可讀的規范之一。每當我瀏覽它以獲取快速答復時，我都不可避免地學到一些意想不到的和有用的東西，尤其是當我開始點擊鏈接的時候。有時（你也）試試吧！

簡而言之，如果要在目錄中列出文檔的一部分，請使用<section>。如果沒有，請使用<div>或其它元素。

內容指標

很好，我們已經得到了一個堅固的頁面結構。我們已經明確標記了頁面的主要內容區域，而不僅僅是單獨調整<div>，我們已經調整出了頁眉，頁腳和章節。但是，肯定還有比我們的文檔更多的語義。

讓我們來談談HTML5中添加的一些元素，它們傳達的內容語義而不是結構。

整體：<article>

<article>元素用于表示完全獨立的內容區域，這些內容可以從頁面中提取出來并放入另一個內容中，并且仍然有意義。這可能是文字文章或博客，但也可用于社交媒體帖子，如推特或臉書的墻貼。

HTML5規范建議文章總有一個標題，標識它是什么，理想的情況下使用標題元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它來嵌入一個完整的文檔片段，其中包含其它頁面中所需的所有結構。

從上面的方式返回到示例，我們使用<article>和我們討論的其它一些元素來重寫帶class="article-*"的元素。

<article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
復制代碼

這不是比原來更具可讀性嗎？而且，不僅更容易閱讀，它對輔助技術更有用；機器人不能總是弄清楚你的特定類名模式，但是它們可以遵循這種結構。

使用：<nav>

這個元素比其它元素更有名。<nav>旨在清楚地識別頁面上的主要導航塊，幫助用戶圍繞站點其余部分找到路徑的鏈接組（例如站點地圖或標題中的鏈接列表）或當前頁面（例如目錄）。

在我們的示例頂部，讓我們將<nav>應用于標題中的那組鏈接。

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>
復制代碼

根本不改變結構，但你知道它是什么，一目了然而不需要在<div>上讀物和處理類名來找到它，更重要的是機器人也可以找到它。

接觸：<address>

我們要討論的最后一個元素是<address>。這個元素旨在調出聯系信息，它通常在主頁<footer>中用于標記企業的郵寄地址，電話號碼，客戶服務郵箱地址等等。

有趣的是，如何在<address>元素中標記內容的規則是開放的。規范提到有幾個其它規范可以解決這個問題，并且提供這種級別的粒度可能超出了HTML本身的范圍。

常見的解決方案是RDFa，也是W3C規范，它使用標簽上的屬性來標記數據的不同組件。下面是我們示例中的頁腳在標記<address>元素和RDFa時可能看起來的樣子：

<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
復制代碼

無疑，RDFa有點冗長，但它對于標記數據非常方便。如果你有興趣了解有關RDFa的更多信息，請點擊以下鏈接：

The W3C's RDFa primer
A description of schemas and links to a bunch of them on schema.org
The LocalBusiness schema used above

總結

好了，我們已經介紹了很多，我們已經看到很多零零散散的元素應用到我們的例子中。那么，讓我們把它們放在一起看看它的樣子。

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>
復制代碼

如果你問我（怎么看改造后的內容？），那這比原始例子的可讀性高100倍，而且對于搜索引擎優化和可訪問性目的而言，其效率將提高100倍。

這些絕不是HTML中唯一的語義元素。有很多其它元素可以幫助你標記和構建你的文本內容，嵌入媒體資源等等。如果你喜歡這個并且希望深入挖掘，這里有一些（標簽）可以查看下。你可能認識一些：

<aside>
<blockquote>
<cite>
code
<data>
<del>
<figure>
<ins>
<time>
<var>

這只是一個開始！就像我說的，當你開始閱讀HTML規范時，很難停下來。它是種非常豐富的語言，我認為人們經常會低估這種語言。

前在項目的過程中遇到了一個問題，某個 div 希望始終顯示在最上面，而在之后的元素都顯示在它之下，當時設置了 z-index 也沒有效果，不知道什么原因，因此找了一下 CSS 相關資料，解決了這個問題的同時，也學習了很多知識，特此和大家分享一下。

屏幕是一個二維平面，然而 HTML 元素卻是排列在三維坐標系中， x 為水平方向， y 為垂直方向， z為屏幕由內向外方向，我們在看屏幕的時候是沿著 z 軸方向從外向內的。由此，元素在用戶視角就形成了層疊的關系，某個元素可能覆蓋了其他元素也可能被其他元素覆蓋；

這里有幾個重要的概念：層疊上下文 (堆疊上下文, Stacking Context)、層疊等級 (層疊水平, Stacking Level)、層疊順序 (層疊次序, 堆疊順序, Stacking Order)、z-index、BFC（塊級格式化上下文，Block Formatting Context），這些概念共同決定了你看到元素的位置，下面我們就圍繞著這幾個概念來一起學習一下。

聲明：

以下定位元素指的是 position:absolute|fixed|relative|sticky
以下非定位元素指的是 position:initial|static
本文蠻長的，但是如果你可以仔細看完，那對相關概念的掌握就非常好了 (～o￣▽￣)～

1. 層疊上下文 (Stacking Context)

層疊上下文 (堆疊上下文, Stacking Context)，是 HTML 中一個三維的概念。在 CSS2.1 規范中，每個元素的位置是三維的，當元素發生層疊，這時它可能覆蓋了其他元素或者被其他元素覆蓋；排在 z 軸越靠上的位置，距離屏幕觀察者越近。

文章 <關于z-index 那些你不知道的事> 有一個很好的比喻，這里引用一下；

可以想象一張桌子，上面有一堆物品，這張桌子就代表著一個層疊上下文。如果在第一張桌子旁還有第二張桌子，那第二張桌子就代表著另一個層疊上下文?，F在想象在第一張桌子上有四個小方塊，他們都直接放在桌子上。在這四個小方塊之上有一片玻璃，而在玻璃片上有一盤水果。這些方塊、玻璃片、水果盤，各自都代表著層疊上下文中一個不同的層疊層，而這個層疊上下文就是桌子。

每一個網頁都像一個房間，這個房間就是 <html></html>，其他層疊上下文就像這個房間里的桌子，HTML 標簽中的一切都被置于這個房間中。

當給一個元素的 position 值賦為 fixed 或 sticky 值時，你就創建了一個新的層疊上下文，其中有著獨立于頁面上其他層疊上下文和層疊層的層疊層，這就相當于你把另一張桌子帶到了房間里。

層疊上下文 1 (Stacking Context 1)是由文檔根元素形成的，層疊上下文 2 和 3 (Stacking Context 2, 3) 都是層疊上下文 1 (Stacking Context 1) 上的層疊層。他們各自也都形成了新的層疊上下文，其中包含著新的層疊上下文。

在層疊上下文中，其子元素按照上面解釋的規則進行層疊。形成層疊上下文的方法有：

根元素 <html></html>；
position 值為 absolute|relative，且 z-index 值不為 auto；
position 值為 fixed|sticky；
z-index 值不為 auto 的 flex 元素，即父元素屬性 display:flex|inline-flex；
opacity 屬性值小于 1 的元素；
transform 屬性值不為 none 的元素；
mix-blend-mode 屬性值不為 normal 的元素；
filter、 perspective、 clip-path、 mask、 mask-image、 mask-border、 motion-path值不為 none 的元素；
perspective 值不為 none 的元素；
isolation 屬性被設置為 isolate 的元素；
will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值
-webkit-overflow-scrolling 屬性設置為 touch 的元素；

總結:

層疊上下文可以包含在其他層疊上下文中，并且一起組建了一個有層級的層疊上下文；
每個層疊上下文完全獨立于它的兄弟元素，當處理層疊時只考慮子元素，類似于 BFC；
每個層疊上下文是自包含的：當元素的內容發生層疊后，整個該元素將會在父級疊上下文中按順序進行層疊；

2. 層疊等級 (Stacking Level)

層疊等級 (層疊水平, Stacking Level) 決定了在同一個層疊上下文中，元素在 z 軸上的顯示的順序；

普通元素的層疊等級優先由其所在的層疊上下文決定；
層疊等級的比較，只有在同一個層疊上下文元素中才有意義；
在同一個層疊上下文中，層疊等級描述定義的是該層疊上下文中的元素在 z 軸上的上下順序；

對于普通元素的層疊水平探討只局限于在當前層疊上下文中：

層疊上下文本身是一個強力的「層疊結界」，普通的元素水平是無法突破這個結界和結界外的元素去較量層疊水平的。
— CSS 世界

另外，層疊等級并不一定由 z-index 決定，只有定位元素的層疊等級才由 z-index 決定，其他類型元素的層疊等級由層疊順序、他們在 HTML 中出現的順序、他們的祖先元素的層疊等級一同決定，詳細的規則見下面層疊順序的介紹。

3. z-index

在 CSS 2.1 中, 所有的盒模型元素都處于三維坐標系中。除了我們常用的橫坐標和縱坐標，盒模型元素還可以沿著「z 軸」層疊擺放，當他們相互覆蓋時，z 軸順序就變得十分重要。
-- CSS 2.1 Section 9.9.1 - Layered presentation

z-index 只適用于定位的元素，對非定位元素無效，它可以被設置為正整數、負整數、 0、 auto，如果一個定位元素沒有設置 z-index，那么默認為 auto；

元素的 z-index 值只在同一個層疊上下文中有意義。如果父級層疊上下文的層疊等級低于另一個層疊上下文的，那么它 z-index 設的再高也沒用。所以如果你遇到 z-index 值設了很大，但是不起作用的話，就去看看它的父級層疊上下文是否被其他層疊上下文蓋住了。

4. 層疊順序 (Stacking Order)

層疊順序 (層疊次序, 堆疊順序, Stacking Order) 描述的是元素在同一個層疊上下文中的順序規則（之前的層疊上下文和層疊等級是概念），從層疊的底部開始，共有七種層疊順序：

背景和邊框：形成層疊上下文的元素的背景和邊框。
負 z-index 值：層疊上下文內有著負 z-index 值的定位子元素，負的越大層疊等級越低；
塊級盒：文檔流中的塊級、非定位子元素；
浮動盒：非定位浮動元素；
行內盒：文檔流中行內、非定位子元素；
z-index: 0： z-index 為 0 或 auto 的定位元素，這些元素形成了新的層疊上下文；
正 z-index 值： z-index 為正的定位元素，正的越大層疊等級越高；

第 7 級順序的元素會顯示在之前順序元素的上方，也就是看起來覆蓋了更低級的元素：

除層疊順序優先級規則之外，還有一條后來居上規則：同一個層疊順序的元素按照在 HTML 里出現的順序依次層疊。這兩個規則共同決定瀏覽器元素在文檔中是如何層疊的。

5. 文檔流 (Document Flow)

5.1 常規流 (Normal flow)

在常規流中，盒一個接著一個排列;
在塊級格式化上下文里面，它們豎著排列；
在行內格式化上下文里面，它們橫著排列;
當 position 為 static 或 relative，并且 float 為 none 時會觸發常規流；
對于靜態定位(static positioning)， position:static，盒的位置是常規流布局里的位置；
對于相對定位(relative positioning)， position:relative，盒偏移位置由 top、 bottom、 left、 right 屬性定義。即使有偏移，仍然保留原有的位置，其它常規流不能占用這個位置。

5.2 浮動 (Floats)

左浮動元素盡量靠左、靠上，右浮動同理；
這導致常規流環繞在它的周邊，除非設置 clear 屬性；
浮動元素不會影響塊級元素的布局；
但浮動元素會影響行內元素的布局，讓其圍繞在自己周圍，撐大父級元素，從而間接影響塊級元素布局；
最高點不會超過當前行的最高點、它前面的浮動元素的最高點；
不超過它的包含塊，除非元素本身已經比包含塊更寬；
行內元素出現在左浮動元素的右邊和右浮動元素的左邊，左浮動元素的左邊和右浮動元素的右邊是不會擺放浮動元素的；

5.3 絕對定位 (Absolute positioning)

絕對定位方案，盒從常規流中被移除，不影響常規流的布局；
它的定位相對于它的包含塊，相關 CSS 屬性： top、 bottom、 left、 right；
如果元素的屬性 position 為 absolute 或 fixed，它是絕對定位元素；
對于 position:absolute，元素定位將相對于上級元素中最近的一個 relative、 fixed、 absolute，如果沒有則相對于 body；

6. BFC （Block Formatting Context）

6.1 什么是 BFC

BFC (Block Formatting Context) 塊級格式化上下文，是用于布局塊級盒子的一塊渲染區域，相對應的還有 IFC（Inline Formatting Context）內聯格式化上下文，不是本文重點，讀者可以自行查閱相關知識。

BFC 是 Web 頁面 CSS 視覺渲染的一部分，用于決定塊盒子的布局及浮動相互影響范圍的一個區域。
— MDN - 塊格式化上下文

一個 BFC 的范圍包含創建該上下文元素的所有子元素，但不包括創建了新 BFC 的子元素的內部元素。這從另一方角度說明，一個元素不能同時存在于兩個 BFC 中。因為如果一個元素能夠同時處于兩個 BFC 中，那么就意味著這個元素能與兩個 BFC 中的元素發生作用，就違反了 BFC 的隔離作用。

觸發 BFC 的方式有：

根元素，即 HTML 標簽;
浮動元素，即 float 值為 left、 right;
overflow 值不為 visible，即值為 auto、 scroll、 hidden；
display 值為 inline-block、 table-cell、 table-caption、 table、 inline-table、 flex、 inline-flex、 grid、 inline-grid；
定位元素： position 值為 absolute、 fixed；
contain 為 layout、 content、 paint 的元素；

注意： display:table 也可以生成 BFC 的原因在于 Table 會默認生成一個匿名的 table-cell，是這個匿名的 table-cell 生成了 BFC。

6.2 用法

1. 阻止相鄰元素的 margin 合并

屬于同一個 BFC 的兩個相鄰塊級子元素的上下 margin 會發生重疊，(設置 writing-mode:tb-rl時，水平 margin 會發生重疊)。所以當兩個相鄰塊級子元素分屬于不同的 BFC 時可以阻止 margin 重疊?？梢越o任一個相鄰塊級盒子的外面包一個 div，通過改變此 div 的屬性使兩個原盒子分屬于兩個不同的 BFC，以此來阻止 margin 重疊。

代碼和預覽參見：Codepen - 使用BFC阻止margin合并：https://codepen.io/SHERlocked93/pen/eVOevN

2. 阻止元素被浮動元素覆蓋

一個正常文檔流的塊級元素可能被一個 float 元素覆蓋，擠占正常文檔流，因此可以設置一個元素的 float、 display、 position 值等方式觸發 BFC，以阻止被浮動盒子覆蓋。

代碼和預覽參見：Codepen - 使用BFC阻止元素被浮動元素覆蓋：https://codepen.io/SHERlocked93/pen/pazdzB

3. 包含浮動元素

通過改變包含浮動子元素的父盒子的屬性值，觸發 BFC，以此來包含子元素的浮動盒子。

代碼和預覽參見：Codepen - 使用BFC包含浮動元素：https://codepen.io/SHERlocked93/pen/OQLOqG

7. 實戰

下面一起來看幾個例子實戰一下，幫助理解。

7.1 普通情況

三個 relative 定位的 div 塊中各有 absolute 的不同顏色的 span.red、 span.green、 span.blue，它們都設置了 position:absolute；

代碼和預覽參見：Codepen - 普通情況：https://codepen.io/SHERlocked93/pen/aaPord

那么當沒有元素包含 z-index 屬性時，這個例子中的元素按照如下順序層疊（從底到頂順序）：

根元素的背景和邊界；
塊級非定位元素按 HTML 中的出現順序層疊；
行內非定位元素按 HTML 中的出現順序層疊；
定位元素按 HTML中的出現順序層疊；

紅綠藍都屬于 z-index 為 auto 的定位元素，因此按照 7 層層疊順序規則來說同屬于層疊順序第 6 級，所以按 HTML 中的出現順序層疊：紅->綠->藍

7.2 在相同層疊上下文的父元素內的情況

紅綠位于一個 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設置了 position:absolute， first-box 與 second-box 都設置了 position:relative；

代碼和預覽參見：Codepen - 父元素不同但都位于根元素下：https://codepen.io/SHERlocked93/pen/RYENBw

這個例子中，紅藍綠元素的父元素 first-box 與 second-box 都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素，且都是層疊順序第 6 級，所以按 HTML 中的出現順序層疊：紅->綠->藍

7.3 給子元素增加 z-index

紅綠位于一個 div.first-box 下，藍黃位于 div.second-box 下，紅綠藍都設置了 position:absolute，如果這時給綠加一個屬性 z-index:1，那么此時 .green 位于最上面；

如果再在 .second-box 下 .green 后加一個絕對定位的 span.gold，設置 z-index:-1，那么它將位于紅綠藍的下面；

代碼和預覽參見：Codepen - 設置了z-index：https://codepen.io/SHERlocked93/pen/gdZOrK

這個例子中，紅藍綠黃元素的父元素中都沒有生成新的層疊上下文，都屬于根層疊上下文中的元素

紅藍都沒有設置 z-index，同屬于層疊順序中的第 6 級，按 HTML 中的出現順序層疊；
綠設置了正的 z-index，屬于第 7 級；
黃設置了負的 z-index，屬于第 2 級；

所以這個例子中的從底到高顯示的順序就是：黃->紅->藍->綠

7.4 在不同層疊上下文的父元素內的情況

紅綠位于一個 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設置了 position:absolute，如果 first-box 的 z-index 設置的比 second-box 的大，那么此時無論藍的 z-index 設置的多大 z-index:999，藍都位于紅綠的下面；如果我們只更改紅綠的 z-index 值，由于這兩個元素都在父元素 first-box 產生的層疊上下文中，此時誰的 z-index 值大，誰在上面；

代碼和預覽參見：Codepen - 不同層疊上下文的父元素：https://codepen.io/SHERlocked93/pen/gdZbOJ

這個例子中，紅綠藍都屬于設置了 z-index 的定位元素，不過他們的父元素創建了新的層疊上下文；

紅綠的父元素 first-box 是設置了正 z-index 的定位元素，因此創建了一個層疊上下文，屬于層疊順序中的第 7 級；
藍的父元素 second-box 也同樣創建了一個層疊上下文，屬于層疊順序中的第6級；
按照層疊順序， first-box 中所有元素都排在 second-box 上；
紅綠都屬于層疊上下文 first-box 中且設置了不同的正 z-index，都屬于層疊順序中第 7 級；
藍屬于層疊上下文 second-box，且設置了一個很大的正 z-index，屬于層疊元素中第 7 級；
雖然藍的 z-index 很大，但是因為 second-box 的層疊等級比 first-box 小，因此位于紅綠之下；

所以這個例子中從低到到顯示的順序：藍->紅->綠

(我遇到的的情況就屬于這個例子類似情形)

7.5 給子元素設置 opacity

紅綠位于 div.first-box 下，藍位于 div.second-box 下，紅綠藍都設置了 position:absolute，綠設置了 z-index:1，那么此時綠位于紅藍的最上面；

如果此時給 first-box 設置 opacity:.99，這時無論紅綠的 z-index 設置的多大 z-index:999，藍都位于紅綠的上面；

如果再在 .second-box 下 .green 后加一個 span.gold，設置 z-index:-1，那么它將位于紅綠藍的下面；

代碼和預覽參見：Codepen - opacity的影響：https://codepen.io/SHERlocked93/pen/GXPRWB

之前已經介紹了，設置 opacity 也可以形成層疊上下文，因此：

first-box 設置了 opacity， first-box 成為了一個新的層疊上下文；
second-box 沒有形成新的層疊上下文，因此其中的元素都屬于根層疊上下文；
黃屬于層疊順序中第 2 級，紅綠屬于第 7 級， first-box 屬于第 6 級，藍屬于層疊順序中第6級且按HTML出現順序位于 first-box 之上；

所以這個例子中從低到到顯示的順序：黃->紅->綠->藍

關注微信公眾號：安徽思恒信息科技有限公司,了解更多技術內容……

據來自MDN整理https://developer.mozilla.org/

文檔元數據

元數據（Metadata）含有頁面的相關信息，包括樣式、腳本及數據，能幫助一些軟件（例如搜索引擎、瀏覽器等等）更好地運用和渲染頁面。對于樣式和腳本的元數據，可以直接在網頁里定義，也可以鏈接到包含相關信息的外部文件

<base>
HTML <base> 元素指定用于一個文檔中包含的所有相對 URL 的根 URL。一份中只能有一個 <base> 元素
<head>
HTML head 元素規定文檔相關的配置信息（元數據），包括文檔的標題，引用的文檔樣式和腳本等。
<link>
HTML外部資源鏈接元素 (<link>) 規定了當前文檔與外部資源的關系。該元素最常用于鏈接樣式表，此外也可以被用來創建站點圖標(比如PC端的“favicon”圖標和移動設備上用以顯示在主屏幕的圖標)
<meta>
HTML <meta> 元素表示那些不能由其它HTML元相關元素 (<base>, <link>, <script>, <style> 或 <title>) 之一表示的任何元數據信息
<style>
HTML的<style>元素包含文檔的樣式信息或者文檔的部分內容。默認情況下，該標簽的樣式信息通常是CSS的格式
<title>
HTML <title> 元素定義文檔的標題，顯示在瀏覽器的標題欄或標簽頁上。它只可以包含文本，若是包含有標簽，則包含的任何標簽都不會被解釋

內容分區

內容分區元素允許你將文檔內容從邏輯上進行組織劃分。使用包括頁眉(header)、頁腳(footer)、導航(nav)和標題(h3~h6)等分區元素，來為頁面內容創建明確的大綱，以便區分各個章節的內容。

<address>
HTML <address> 元素表示其中的 HTML 提供了某個人或某個組織（等等）的聯系信息
<article>
HTML <article>元素表示文檔、頁面、應用或網站中的獨立結構，其意在成為可獨立分配的或可復用的結構，如在發布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件，或者其他獨立的內容項目
<aside>
HTML <aside> 元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響
<footer>
HTML <footer> 元素表示最近一個章節內容或者根節點（sectioning root ）元素的頁腳。一個頁腳通常包含該章節作者、版權數據或者與文檔相關的鏈接等信息
<header>
HTML <header> 元素用于展示介紹性內容，通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素，但也可能包含其他元素，比如 Logo、搜索框、作者名稱，等等
<h1>~<h6>
HTML <h1>–<h6> 標題(Heading)元素呈現了六個不同的級別的標題，<h1> 級別最高，而 <h6> 級別最低
<hgroup>
HTML <hgroup> Element (HTML Headings Group Element) 代表一個段的標題。它規定了在文檔輪廓里（the outline of the document ）的單一標題是它所屬的隱式或顯式部分的標題
<main>
HTML <main> 元素呈現了文檔的 <body> 或應用的主體部分。主體部分由與文檔直接相關，或者擴展于文檔的中心主題、應用的主要功能部分的內容組成
<nav>
HTML <nav>元素表示頁面的一部分，其目的是在當前文檔或其他文檔中提供導航鏈接。導航部分的常見示例是菜單，目錄和索引
<section>
HTML <section>元素表示一個包含在HTML文檔中的獨立部分，它沒有更具體的語義元素來表示，一般來說會有包含一個標題

文本內容

使用 HTML 文本內容元素來組織在開標簽 <body> 和閉標簽 </body> 里的塊或章節的內容。這些元素能標識內容的宗旨或結構，而這對于 accessibility 和 SEO 很重要。

<blockquote>
HTML <blockquote> 元素（或者 HTML 塊級引用元素），代表其中的文字是引用內容。通常在渲染時，這部分的內容會有一定的縮進（注中說明了如何更改）。若引文來源于網絡，則可以將原內容的出處 URL 地址設置到 cite 特性上，若要以文本的形式告知讀者引文的出處時，可以通過 <cite> 元素
<dd>
HTML <dd> 元素（HTML 描述元素）用來指明一個描述列表 (<dl>) 元素中一個術語的描述。這個元素只能作為描述列表元素的子元素出現，并且必須跟著一個 <dt> 元素
<div>
HTML <div> 元素 (或 HTML 文檔分區元素) 是一個通用型的流內容容器
<dl>
HTML <dl> 元素（或 HTML 描述列表元素）是一個包含術語定義以及描述的列表，通常用于展示詞匯表或者元數據 (鍵-值對列表)
<dt>
HTML <dt> 元素（或 HTML 術語定義元素）用于在一個定義列表中聲明一個術語。該元素僅能作為 <dl> 的子元素出現。通常在該元素后面會跟著 <dd> 元素，然而，多個連續出現的 <dt> 元素都將由出現在它們后面的第一個 <dd> 元素定義
<figcaption>
HTML <figcaption> 元素是與其相關聯的圖片的說明/標題，用?于描述其父節點 <figure> 元素里的其他數據。這意味著 <figcaption> 在<figure> 塊里是第一個或最后一個。同時 HTML Figcaption 元素是可選的；如果沒有該元素，這個父節點的圖片只是會沒有說明/標題
<figure>
HTML <figure> 元素代表一段獨立的內容, 經常與說明（caption） <figcaption> 配合使用, 并且作為一個獨立的引用單元。當它屬于主內容流（main flow）時，它的位置獨立于主體。這個標簽經常是在主文中引用的圖片，插圖，表格，代碼段等等，當這部分轉移到附錄中或者其他頁面時不會影響到主體
<hr>
HTML <hr> 元素表示段落級元素之間的主題轉換（例如，一個故事中的場景的改變，或一個章節的主題的改變）。在HTML的早期版本中，它是一個水平線。現在它仍能在可視化瀏覽器中表現為水平線，但目前被定義為語義上的，而不是表現層面上
<li>
HTML<li> 元素（或稱 HTML 列表條目元素） 用于表示列表里的條目。它必須包含在一個父元素里：一個有序列表(<ol>)，一個無序列表(<ul>)，或者一個菜單 (<menu>)。在菜單或者無序列表里，列表條目通常用點排列顯示；在有序列表里，列表條目通常在左邊顯示按升序排列的計數，例如數字或者字母
<main>
HTML <main> 元素呈現了文檔的 <body> 或應用的主體部分。主體部分由與文檔直接相關，或者擴展于文檔的中心主題、應用的主要功能部分的內容組成
<ol>
HTML <ol> 元素表示多個有序列表項，通常渲染為有帶編號的列表
<p>
<p>元素（或者說 HTML 段落元素）表示文本的一個段落。該元素通常表現為一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮進。另外，<p> 是塊級元素
<pre>
HTML <pre> 元素表示預定義格式文本。在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現出來，文本中的空白符（比如空格和換行符）都會顯示出來。(緊跟在 <pre> 開始標簽后的換行符也會被省略)
<ul>
HTML <ul> 元素（或稱 HTML 無序列表元素）表示一個內可含多個元素的無序列表或項目符號列表

內聯文本語義

使用 HTML 內聯文本語義（Inline text semantics）定義一個單詞、一行內容，或任意文字的語義、結構或樣式。

圖片和多媒體

HTML 支持各種多媒體資源，例如圖像、音頻和視頻。

內嵌內容

除了常規的多媒體內容，HTML 可以包括各種其他的內容，即使它并不容易交互。

腳本

為了創建動態內容和 Web 應用程序，HTML 支持使用腳本語言，最突出的就是 JavaScript。某些元素用于支持此功能。

編輯標識

這些元素能標示出某個文本被更改過的部分。

表格內容

這里的元素用于創建和處理表格數據。

表單

HTML 提供了許多可以起使用的元素，這些元素能用來創建一個用戶可以填寫并提交到網站或應用程序的表單。

交互元素

HTML 提供了一系列有助于創建交互式用戶界面對象的元素。

過時的和棄用的元素

警告：下面這些舊的 HTML 元素已被棄用，且不應再被使用。千萬不要在新的項目中使用它們，并且要盡快替換舊項目中的殘余。在此列出，僅供參考

在線咨詢

上一篇：掌握Django文件處理：一步步構建上傳功能
下一篇：價值投資：數字貨幣可長線持有的三種幣

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商