11 KiB
| title | chunk | source | category | tags | date_saved | instance |
|---|---|---|---|---|---|---|
| Layout mode - Glossary | MDN | 1/3 | https://developer.mozilla.org/en-US/docs/Glossary/Layout_mode | reference | web, html, css, javascript, documentation | 2026-05-05T05:36:26.831515+00:00 | kb-cron |
MDN HTML HTML: Markup language
HTML reference
HTML guides
Markup languages
CSS reference
CSS guides
Layout cookbook
JavaScriptJS JavaScript: Scripting language
JS reference
JS guides
Web APIs Web APIs: Programming interfaces
Web API reference
Web API guides
- Using the Web animation API
- Using the Fetch API
- Working with the History API
- Using the Web speech API
- Using web workers
Technologies
Topics
Learn Learn web development
Frontend developer course
- Getting started modules
- Core modules
- MDN Curriculum
- Check out the video course from Scrimba, our partner
Learn HTML
Learn CSS
Learn JavaScript
Tools Discover our tools
About Get to know MDN better
Layout mode
A layout mode , sometimes called layout , is a CSS algorithm that determines the position and size of element boxes based on the way they interact with their sibling and ancestor boxes. There are several layout modes:
All elements are part of normal flow until you do something to take them out of it.Normal flow includes:
Designed for laying out boxes such as paragraphs.
Designed for laying out inline items such as text.
Designed for laying out tables.
Designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.
Designed for positioning elements without much interaction with other elements.
Designed for laying content out in columns as in a newspaper.
Designed for laying out complex pages that can be resized smoothly.
Designed for laying out elements relative to a fixed grid. Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.