Moved CSS guide (#31997)

* Moved file

* moved files

files/en-us/_redirects.txt

@@ -604,7 +604,7 @@
 /en-US/docs/CSS/background-position	/en-US/docs/Web/CSS/background-position
 /en-US/docs/CSS/background-repeat	/en-US/docs/Web/CSS/background-repeat
 /en-US/docs/CSS/background-size	/en-US/docs/Web/CSS/background-size
-/en-US/docs/CSS/block_formatting_context	/en-US/docs/Web/Guide/CSS/Block_formatting_context
+/en-US/docs/CSS/block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/CSS/border	/en-US/docs/Web/CSS/border
 /en-US/docs/CSS/border-bottom	/en-US/docs/Web/CSS/border-bottom
 /en-US/docs/CSS/border-bottom-color	/en-US/docs/Web/CSS/border-bottom-color
@@ -984,7 +984,7 @@
 /en-US/docs/CSS:background-image	/en-US/docs/Web/CSS/background-image
 /en-US/docs/CSS:background-position	/en-US/docs/Web/CSS/background-position
 /en-US/docs/CSS:background-repeat	/en-US/docs/Web/CSS/background-repeat
-/en-US/docs/CSS:block_formatting_context	/en-US/docs/Web/Guide/CSS/Block_formatting_context
+/en-US/docs/CSS:block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/CSS:border	/en-US/docs/Web/CSS/border
 /en-US/docs/CSS:border-bottom	/en-US/docs/Web/CSS/border-bottom
 /en-US/docs/CSS:border-bottom-color	/en-US/docs/Web/CSS/border-bottom-color
@@ -11380,7 +11380,7 @@
 /en-US/docs/Web/CSS/Alias	/en-US/docs/Web/CSS/cursor
 /en-US/docs/Web/CSS/All_About_The_Containing_Block	/en-US/docs/Web/CSS/Containing_block
 /en-US/docs/Web/CSS/Aural	/en-US/docs/Web/CSS/@media/aural
-/en-US/docs/Web/CSS/Block_formatting_context	/en-US/docs/Web/Guide/CSS/Block_formatting_context
+/en-US/docs/Web/CSS/Block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/Web/CSS/CSS3_Columns	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 /en-US/docs/Web/CSS/CSS_Background_and_Borders	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders
 /en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
@@ -12034,6 +12034,7 @@
 /en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player	/en-US/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player
 /en-US/docs/Web/Guide/Audio_and_video_manipulation	/en-US/docs/Web/Media/Audio_and_video_manipulation
 /en-US/docs/Web/Guide/CSS	/en-US/docs/Learn/CSS
+/en-US/docs/Web/Guide/CSS/Block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/Web/Guide/CSS/CSS_Image_Sprites	/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
 /en-US/docs/Web/Guide/CSS/Consistent_list_indentation	/en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation
 /en-US/docs/Web/Guide/CSS/Counters	/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters

files/en-us/_wikihistory.json

@@ -77127,6 +77127,43 @@
       "teoli"
     ]
   },
+  "Web/CSS/CSS_display/Block_formatting_context": {
+    "modified": "2020-11-02T20:53:20.927Z",
+    "contributors": [
+      "spollard",
+      "pacexy",
+      "wbamberg",
+      "Mookiepiece",
+      "SelenIT",
+      "TrevorKarjanis",
+      "mfuji09",
+      "Konrud",
+      "estelle",
+      "wavesheep",
+      "jennyevans",
+      "MelvinIdema",
+      "chrisdavidmills",
+      "Ende93",
+      "xiaohanyu",
+      "YvonneZhang",
+      "pythonista27",
+      "S-Dey",
+      "mfluehr",
+      "yisibl",
+      "alberts+",
+      "rainyLeo",
+      "PageYe",
+      "HashemQolami",
+      "Jeremie",
+      "teoli",
+      "kscarfone",
+      "tregagnon",
+      "Sheppy",
+      "cbiesinger",
+      "Kohei",
+      "DBaron"
+    ]
+  },
   "Web/CSS/CSS_filter_effects": {
     "modified": "2020-12-02T11:05:43.361Z",
     "contributors": ["peterbe", "wbamberg", "fscholz", "mfluehr"]
@@ -91930,43 +91967,6 @@
       "ethertank"
     ]
   },
-  "Web/Guide/CSS/Block_formatting_context": {
-    "modified": "2020-11-02T20:53:20.927Z",
-    "contributors": [
-      "spollard",
-      "pacexy",
-      "wbamberg",
-      "Mookiepiece",
-      "SelenIT",
-      "TrevorKarjanis",
-      "mfuji09",
-      "Konrud",
-      "estelle",
-      "wavesheep",
-      "jennyevans",
-      "MelvinIdema",
-      "chrisdavidmills",
-      "Ende93",
-      "xiaohanyu",
-      "YvonneZhang",
-      "pythonista27",
-      "S-Dey",
-      "mfluehr",
-      "yisibl",
-      "alberts+",
-      "rainyLeo",
-      "PageYe",
-      "HashemQolami",
-      "Jeremie",
-      "teoli",
-      "kscarfone",
-      "tregagnon",
-      "Sheppy",
-      "cbiesinger",
-      "Kohei",
-      "DBaron"
-    ]
-  },
   "Web/Guide/CSS/Getting_started/Challenge_solutions": {
     "modified": "2019-08-29T20:48:33.765Z",
     "contributors": [

files/en-us/glossary/block-level_content/index.md

@@ -42,6 +42,6 @@ p {
 ## See also
 
 - [Inline-level content](/en-US/docs/Glossary/Inline-level_content)
-- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context)
+- [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
 - {{cssxref("display")}}
 - [`writing-mode`](/en-US/docs/Web/CSS/writing-mode)

files/en-us/learn/css/building_blocks/overflowing_content/index.md

@@ -92,7 +92,7 @@ If you only want scrollbars to appear when there is more content than can fit in
 
 ## Overflow establishes a Block Formatting Context
 
-When you use the `<overflow>` values `scroll` and `auto`, you create a [**Block Formatting Context** (BFC)](/en-US/docs/Web/Guide/CSS/Block_formatting_context). This means that the content of an element box with these `overflow` values acquires a self-contained layout. Content outside such an element box cannot poke into the element box, and nothing from the element box can poke into the surrounding layout. This enables scrolling behavior, as all box content needs to be contained and not overlap to create a consistent scrolling experience.
+When you use the `<overflow>` values `scroll` and `auto`, you create a [**Block Formatting Context** (BFC)](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context). This means that the content of an element box with these `overflow` values acquires a self-contained layout. Content outside such an element box cannot poke into the element box, and nothing from the element box can poke into the surrounding layout. This enables scrolling behavior, as all box content needs to be contained and not overlap to create a consistent scrolling experience.
 
 ## Unwanted overflow in web design
 

files/en-us/learn/css/css_layout/floats/index.md

@@ -403,7 +403,7 @@ body {
 
 {{EmbedLiveSample('the_problem', '100%', 600)}}
 
-Once again, this is because the float has been taken out of normal flow. You might expect that by wrapping the floated box and the text of first paragraph that wraps around the float together, the subsequent content will be cleared of the box. But this is not the case, as shown above. To deal with this, the standard method is to create a [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) using the {{cssxref("display")}} property.
+Once again, this is because the float has been taken out of normal flow. You might expect that by wrapping the floated box and the text of first paragraph that wraps around the float together, the subsequent content will be cleared of the box. But this is not the case, as shown above. To deal with this, the standard method is to create a [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) using the {{cssxref("display")}} property.
 
 ### display: flow-root
 

files/en-us/web/accessibility/aria/roles/scrollbar_role/index.md

@@ -9,7 +9,7 @@ A `scrollbar` is a graphical object that controls the scrolling of content withi
 
 ## Description
 
-A `scrollbar` is a range that controls what part of a viewport's content is currently visible in the viewport's frame; whether the viewport is a full browser size, an iframe, or any element's [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context).
+A `scrollbar` is a range that controls what part of a viewport's content is currently visible in the viewport's frame; whether the viewport is a full browser size, an iframe, or any element's [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context).
 
 ### What is scroll bar
 

files/en-us/web/api/document_object_model/whitespace/index.md

@@ -140,7 +140,7 @@ This is why people visiting the web page will see the phrase "Hello World!" nice
 
 ### Whitespace in block formatting contexts
 
-Above we just looked at elements that contain inline elements, and inline formatting contexts. If an element contains at least one block element, then it instead establishes what is called a [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context).
+Above we just looked at elements that contain inline elements, and inline formatting contexts. If an element contains at least one block element, then it instead establishes what is called a [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context).
 
 Within this context, whitespace is treated very differently.
 

files/en-us/web/css/clear/index.md

@@ -15,7 +15,7 @@ When applied to non-floating blocks, it moves the [border edge](/en-US/docs/Web/
 
 Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
 
-The floats that are relevant to be cleared are the earlier floats within the same [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context).
+The floats that are relevant to be cleared are the earlier floats within the same [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context).
 
 > **Note:** If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, set the value of the element's [`display`](/en-US/docs/Web/CSS/display) property to [`flow-root`](/en-US/docs/Web/CSS/display#flow-root).
 >

files/en-us/web/css/contain/index.md

@@ -23,7 +23,7 @@ Using the `contain` property is useful on pages with groups of elements that are
 >
 > 1. A new [containing block](/en-US/docs/Web/CSS/Containing_block) (for the descendants whose {{cssxref("position")}} property is `absolute` or `fixed`).
 > 2. A new [stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
-> 3. A new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context).
+> 3. A new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context).
 
 ## Syntax
 

files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md

@@ -13,7 +13,7 @@ Margin collapsing occurs in three basic cases:
 - Adjacent siblings
   - : The margins of adjacent siblings are collapsed (except when the latter sibling needs to be [cleared](/en-US/docs/Web/CSS/clear) past floats).
 - No content separating parent and descendants
-  - : If there is no border, padding, inline part, [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) created, or _[clearance](/en-US/docs/Web/CSS/clear)_ to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of one or more of its descendant blocks; or no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
+  - : If there is no border, padding, inline part, [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) created, or _[clearance](/en-US/docs/Web/CSS/clear)_ to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of one or more of its descendant blocks; or no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
 - Empty blocks
   - : If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.
 

files/en-us/web/guide/css/block_formatting_context/index.md → files/en-us/web/css/css_display/block_formatting_context/index.md

@@ -1,6 +1,6 @@
 ---
 title: Block formatting context
-slug: Web/Guide/CSS/Block_formatting_context
+slug: Web/CSS/CSS_display/Block_formatting_context
 page-type: guide
 spec-urls: https://drafts.csswg.org/css-display/#block-formatting-context
 ---

files/en-us/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md

@@ -54,7 +54,7 @@ When you do anything to remove or shift an item from where it would be placed in
 
 ## Summary
 
-In this guide, we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), in [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts).
+In this guide, we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a [Block Formatting Context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context), in [Formatting Contexts Explained](/en-US/docs/Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts).
 
 ## See also
 

files/en-us/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md

@@ -79,6 +79,6 @@ In this guide, we have looked in more detail at the block and Inline formatting
 
 ## See also
 
-- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context)
+- [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
 - [Visual Formatting Model](/en-US/docs/Web/CSS/Visual_formatting_model)
 - [CSS Box Model](/en-US/docs/Web/CSS/CSS_box_model)

files/en-us/web/css/css_multicol_layout/basic_concepts/index.md

@@ -40,7 +40,7 @@ In the below example, we use the `column-count` property to create three columns
 
 {{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}
 
-In the above example, the content is wrapped within the paragraph `<p>` tags with the default styling. Therefore, there is a margin above each paragraph. You can see how this margin causes the first line of text to be pushed down. This is because a multicol container creates a [block formatting context (BFC)](/en-US/docs/Web/Guide/CSS/Block_formatting_context) because of which margins on child elements do not collapse with any margin on the container.
+In the above example, the content is wrapped within the paragraph `<p>` tags with the default styling. Therefore, there is a margin above each paragraph. You can see how this margin causes the first line of text to be pushed down. This is because a multicol container creates a [block formatting context (BFC)](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) because of which margins on child elements do not collapse with any margin on the container.
 
 ### Specifying the width of columns
 

files/en-us/web/css/css_multicol_layout/index.md

@@ -60,7 +60,7 @@ To see the code for this columned layout, [view the source on GitHub](https://gi
 - {{cssxref("height")}}, {{cssxref("max-height")}}, and {{cssxref("block-size")}} CSS properties
 - {{cssxref("width")}}, {{cssxref("max-width")}}, and {{cssxref("inline-size")}} CSS properties
 - {{cssxref("line-style")}} enumerated data type
-- [Block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) guide
+- [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) guide
 
 ## Specifications
 

files/en-us/web/css/display-inside/index.md

@@ -26,10 +26,10 @@ Valid `<display-inside>` values:
 
     If its outer display type is `inline` or `run-in`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
 
-    Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.
+    Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.
 
 - `flow-root`
-  - : The element generates a block element box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.
+  - : The element generates a block element box that establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context), defining where the formatting root lies.
 - `table`
   - : These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box.
 - `flex`

files/en-us/web/css/display/index.md

@@ -95,10 +95,10 @@ The keyword values can be grouped into six value categories.
 
         If its outer display type is `inline` or `run-in`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
 
-        Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.
+        Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.
 
     - `flow-root`
-      - : The element generates a block box that establishes a new [block formatting context](/en-US/docs/Web/Guide/CSS/Block_formatting_context), defining where the formatting root lies.
+      - : The element generates a block box that establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context), defining where the formatting root lies.
     - `table`
       - : These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box.
     - `flex`

files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md

@@ -59,7 +59,7 @@ There are mappings for all of the existing values of `display`; the most common
 
 ## display: block flow-root and display: inline flow-root
 
-Regarding how this multi-value syntax helps clarify CSS layout, we can look at some values in the table above that might be less familiar to you. The multi-keyword `display: block flow-root` maps to a single value; `display: flow-root`. This value's only purpose is to create a new [Block Formatting Context](/en-US/docs/Web/Guide/CSS/Block_formatting_context) (BFC). A BFC ensures that everything inside your box stays inside, and things outside the box cannot intrude into it.
+Regarding how this multi-value syntax helps clarify CSS layout, we can look at some values in the table above that might be less familiar to you. The multi-keyword `display: block flow-root` maps to a single value; `display: flow-root`. This value's only purpose is to create a new [Block Formatting Context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC). A BFC ensures that everything inside your box stays inside, and things outside the box cannot intrude into it.
 
 In the example below, two `<p>` elements, one inside a `<div>` demonstrate how display values affect formatting contexts.
 The first `<div>` element with the demo controls is hidden so we can focus on the elements that follow instead.