[CSS] docs: Correct display value and BFC behavior for button elements (#40525)

kannanwisen · github-actions[bot] · Josh-Cena · web-flow · commit ab05178c343c · 2025-11-10T14:45:04.000Z
* Update index.md

* Update files/en-us/web/css/css_display/block_formatting_context/index.md

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;

* Merge items

* Reorder

---------

Co-authored-by: github-actions[bot] &lt;41898282+github-actions[bot]@users.noreply.github.com&gt;
Co-authored-by: Joshua Chen &lt;sidachen2003@gmail.com&gt;
diff --git a/files/en-us/web/css/guides/display/block_formatting_context/index.md b/files/en-us/web/css/guides/display/block_formatting_context/index.md
@@ -13,16 +13,15 @@ A block formatting context is created by at least one of the following:
 - The root element of the document (`<html>`).
 - Floats (elements where {{ cssxref("float") }} isn't `none`).
 - Absolutely positioned elements (elements where {{ cssxref("position") }} is `absolute` or `fixed`).
-- Inline-blocks (elements with {{cssxref("display", "display: inline-block")}}).
+- Inline-blocks (elements with {{cssxref("display", "display: inline-block")}}). This is the default display type for {{htmlelement("button")}} and button {{htmlelement("input")}} elements.
 - Table cells (elements with {{cssxref("display", "display: table-cell")}}, which is the default for HTML table cells).
 - Table captions (elements with {{cssxref("display", "display: table-caption")}}, which is the default for HTML table captions).
 - Anonymous table cells implicitly created by the elements with {{cssxref("display", "display: table")}}, `table-row`, `table-row-group`, `table-header-group`, `table-footer-group` (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or `inline-table`.
-- Block elements where {{ cssxref("overflow") }} has a value other than `visible` and `clip`.
 - Elements with {{cssxref("display", "display: flow-root")}}.
-- {{htmlelement("button")}} elements and button {{htmlelement("input")}} types defaulting to `display: flow-root`.
-- Elements with {{cssxref("contain", "contain: layout")}}, `content`, or `paint`.
 - Flex items (direct children of the element with {{cssxref("display", "display: flex")}} or `inline-flex`) if they are neither [flex](/en-US/docs/Glossary/Flex_Container) nor [grid](/en-US/docs/Glossary/Grid_Container) nor [table](/en-US/docs/Web/CSS/Guides/Table) containers themselves.
 - Grid items (direct children of the element with {{cssxref("display", "display: grid")}} or `inline-grid`) if they are neither [flex](/en-US/docs/Glossary/Flex_Container) nor [grid](/en-US/docs/Glossary/Grid_Container) nor [table](/en-US/docs/Web/CSS/Guides/Table) containers themselves.
+- Block elements where {{ cssxref("overflow") }} has a value other than `visible` and `clip`.
+- Elements with {{cssxref("contain", "contain: layout")}}, `content`, or `paint`.
 - Multicol containers (elements where {{ cssxref("column-count") }} or {{ cssxref("column-width") }} isn't `auto`, including elements with `column-count: 1`).
 - {{cssxref("column-span", "column-span: all")}}, even when the `column-span: all` element isn't contained by a multicol container.
 
@@ -56,8 +55,6 @@ With `display: flow-root;` on the `<div>`, everything inside that container part
 
 The value name of `flow-root` makes sense when you understand you are creating something that acts like the `root` element (`<html>` element in browser) in terms of how it creates a new context for the flow layout inside it.
 
-This is the default rendering for {{htmlelement("button")}} elements and button {{htmlelement("input")}} types meaning button's create a new BFC as long as their `display` value isn't set to a value that doesn't automatically create a new BFC.
-
 #### HTML
 
 ```html
