Standard Document Flow

Standard document flow, also known as normal flow, refers to the default arrangement rules for elements on a page. For example, block elements occupy a full line, while inline elements can appear multiple times on the same line.

Float Property

Purpose: Enables horizontal alignment of block elements.

Property name: float

Values:

• left: Aligns to the left
• right: Aligns to the right

Characteristics:

• Floated boxes align at the top
• Floated boxes exhibit inline-block behavior
• Floated boxes脱离standard flow and don't occupy space in the normal flow

/* Characteristics: Top alignment, inline-block display mode, floated boxes脱离standard flow */
.container1 {
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}

.container2 {
  width: 400px;
  height: 400px;
  background-color: green;
}

HTML structure:

<div class="container1">Box 1</div>
<div class="container2">Box 2</div>

Content Layout Example

Layout with left sidebar and right product grid

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul li {
    list-style: none;
}

.content-wrapper {
    margin: 50px auto;
    width: 1226px;
    height: 628px;
    background-color: #00ffee;
}

.sidebar-left {
    float: left;
    width: 243px;
    height: 628px;
    background-color: #f06b1f;
}

.products-grid {
    float: right;
    width: 978px;
    height: 628px;
    background-color: #e600ff;
}

.products-grid li {
    float: left;
    margin-bottom: 14px;
    margin-right: 14px;
    width: 234px;
    height: 300px;
    background-color: #b44d4d;
}

/* Remove right margin from 4th and 8th items */
.products-grid li:nth-child(4n) {
    margin-right: 0;
}

/* Detail: If parent width is insufficient, floated boxes will drop to next line */

HTML structure:

<div class="content-wrapper">
    <div class="sidebar-left"></div>
    <div class="products-grid">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

Clearing Float Effects

Scenario: Floated elements脱离normal flow. If the parent has no defined height, child elements cannot expand the parent's height (potentially causing layout issues).

Soltuion: Clear float effects

Method 1: Extra Element Method

Add a block element at the end of parent content with CSS property clear: both

.content-wrapper {
    margin:0 auto;
    width: 1226px;
    background-color: #00ffee;
}

.sidebar-left {
    float: left;
    width: 243px;
    height: 628px;
    background-color: #f06b1f;
}

.products-grid {
    float: right;
    width: 978px;
    height: 628px;
    background-color: #e600ff;
}

.additional-content {
    height: 300px;
    background-color: #49e3fd;
}

.clear-float {
    clear: both;
}

Method 2: Single Pseudo-element

.clear-float::after{
    content:"";
    display: block;
    clear: both;
}

Method 3: Double Pseudo-element (Recommended)

.clear-float::before,
.clear-float::after{
    content:"";
    display: table;
}

.clear-float::after {
    clear:both;
}

Method 4: Overflow Property

Add CSS property overflow: hidden to parent element

.content-wrapper {
    margin:0 auto;
    width: 1226px;
    background-color: #00ffee;
    overflow: hidden;
}

Note: The fundamental purpose of floating is to achieve text wrapping around images effect.

Flexbox Layout

Flexbox layout, also called flexible layout, is a browser-recommended layout model that excels in structured layouts and provides powerful space distribution and alignment capabilities.

Flexbox avoids the脱离normal flow issues found in floating layouts, making webpage layouts simpler and more flexible.

Flexbox Components

Implementation: Apply display: flex to parent element for automatic compression or stretching

Components:

• Flexible container
• Flexible items
• Main axis: Default direction is horizontal
• Cross axis: Default direction is vertical

/* Flexible container */
.flex-container {
    display: flex;
    height: 300px;
    border: 1px solid red;
}

/* Flexible items: arranged along main axis */
.flex-container div {
    list-style: none;
    width: 100px;
    height: 100px;
    background-color: orange;
}

HTML structure:

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

Flexbox Properties

Main Axis Alignment

Property: justify-content

/* Flexible container */
.flex-container {
    display: flex;
    
    /* Space evenly with equal spacing everywhere */
    justify-content: space-evenly;
    
    height: 300px;
    border: 1px solid red;
}

Cross Axis Alignment

Properties:

• align-items: Cross axis alignment for all items within container (applied to container)
• align-self: Individual item cross axis alignment (applied to specific item)

/* Flexible container */
.flex-container {
    display: flex;
    
    /* Align items at bottom of cross axis */
    align-items: flex-end;
    
    height: 300px;
    border: 1px solid red;
}

/* Second item aligned center on cross axis */
.flex-container div:nth-child(2){
    align-self: center;
}

/* Flexible items arranged along main axis */
.flex-container div {
    list-style: none;
    width: 100px;
    height: 100px;
    background-color: orange;
}

Changing Main Axis Direction

Main axis defaults to horizontal, cross axis defaults to vertical

Property: flex-direction

.layout-model {
    display: flex;
    
    /* Change main axis to vertical: cross axis becomes horizontal */
    flex-direction: column;
    
    /* Cross axis horizontal, visual effect: horizontal centering */
    align-items: center;
    
    /* Main axis vertical, visual effect: vertical centering */
    justify-content: center;
    
    width: 200px;
    height: 200px;
    background-color: #da3838;
}

.media-icon {
    width: 40px;
    height: 40px;
}

Flexible Growth Ratio

Purpose: Controls item size along main axis.

Property: flex

Value: Integer representing portion of remaining parent space to occupy

.flex-container {
    display: flex;
    flex-direction: column;
    height: 300px;
    border: 1px solid red;
}

.flex-container div:nth-child(1) {
    width: 100px;
    background-color: #b41616;
}

.flex-container div:nth-child(2) {
    flex: 1;
    background-color: #b41616;
}

.flex-container div:nth-child(3) {
    flex: 2;
    background-color: #1c6ad0;
}

Item Wrapping

Flexible items can compress or stretch automatically. By default, all items display on one line.

Property: flex-wrap

Values:

• wrap: Enable wrapping
• nowrap: Disable wrapping (default)

Multi-line Alignment

Property: align-content

/* Flexible container */
.flex-container {
    display: flex;
    
    flex-wrap: wrap;
    justify-content: space-between;
    
    /* Multi-line alignment: doesn't affect single-line containers */
    align-content: space-evenly;
    
    height: 800px;
    width: 1000px;
    border: 1px solid red;
}

.flex-container div {
    width: 300px;
    height: 200px;
    background-color: #c92121;
}