`, a ``, or an ``—is initially positioned according to these rules. All CSS layout properties (`position`, `float`, `flex`, `grid`) are essentially tools to manipulate or deviate from this default flow.
+
+ Third Block (A paragraph)
+ This text is Inline and
+ This link is also Inline. They flow together.
+ ` (Paragraph)
+* `
+
+## 1. Block Flow vs. Inline Flow
+
+The Normal Flow is governed by the two primary display types:
+
+### A. Block-Level Flow (Vertical Stacking)
+
+Block elements define structure and content sections. They flow vertically, one after the other.
+
+* **Characteristics:**
+ 1. Always starts on a new line.
+ 2. Takes up the full width of the parent container by default.
+ 3. Respects all Box Model properties (`margin`, `padding`, `width`, `height`).
+
+* **Flow Example:** Imagine stacking building blocks one on top of the other.
+
+```html title="styles.css"
+
+
+
+## 2. The Role of `display: inline-block`
+
+The `inline-block` value creates a hybrid element that follows the rules of both flows:
+
+ * **External Flow (Inline):** The element flows horizontally and sits next to other elements on the same line.
+ * **Internal Behavior (Block):** The element fully respects `width`, `height`, and all four margins/padding values, making it a predictable box.
+
+:::tip Use Case
+`inline-block` is typically used for simple horizontal alignment (like old-school navigation menus) where you need to control the size of the box while keeping them on the same line. However, for most modern layouts, **Flexbox** is the preferred tool for horizontal flow.
+:::
+
+## 3. Manipulating the Flow (The Transition to Layout)
+
+When you introduce CSS layout properties, you are actively telling the browser to take elements *out* of the Normal Flow or change the way the flow behaves.
+
+| Property/Value | How it Affects the Flow |
+| :--- | :--- |
+| **`position: absolute`** | **Removes** the element entirely from the flow. Surrounding content collapses. |
+| **`float: left / right`** | **Removes** the element from the flow, but allows surrounding content (text) to wrap around it. |
+| **`display: flex`** | **Changes** the flow rules for the children. They now follow **Flex Flow** (a one-dimensional directional flow). |
+| **`display: grid`** | **Changes** the flow rules for the children. They now follow **Grid Flow** (a two-dimensional cell-based flow). |
+
+
+
+## 4. Why Does the Flow Matter?
+
+Understanding the Normal Flow helps you debug layout issues quickly.
+
+### Debugging Collapse
+
+If a background color or border on a parent element suddenly collapses, it's often because a child element was removed from the flow (using `position: absolute` or `float`), and the parent no longer recognizes its height.
+
+### Debugging Spacing
+
+If you try to set `margin-top` on a `` and it doesn't move, it's because the element is *inline*, and inline elements ignore vertical margins in the Normal Flow. You would need to change it to `display: block` or `display: inline-block` to make those margins work.
+
+## Interactive Summary Demo
+
+This demo illustrates the behavior of the three main `display` types in one container.
+
+
+
+## Key Characteristics of Block Elements
+
+Block elements follow three strict rules that govern their behavior in the document flow:
+
+### 1. Takes Full Available Width
+
+By default, a block element will automatically stretch horizontally to occupy $100\%$ of the width of its parent container, regardless of how much content is inside it.
+
+### 2. Starts on a New Line
+
+A block element always begins on a new line, effectively pushing any content or elements that came before it onto the previous line. They naturally stack vertically.
+
+### 3. Respects Box Model Properties
+
+Block elements fully respect all components of the Box Model:
+* **`width` and `height`:** Can be explicitly set (e.g., `width: 200px;`).
+* **`margin` and `padding`:** All four sides (`top`, `right`, `bottom`, `left`) are fully applied and affect the flow.
+
+## Common Block-Level Elements
+
+The following HTML elements default to `display: block`:
+
+* `` through `
` (Headings)
+* `
`, `
`, `