About

When the container and the child box has the default position value (ie static), we speak of this situation has been the normal flow.

Basically, the elements appear on the page as they appear in source code.

The normal flow in a block box context is when boxes are:

• laid out one after the other.
• block box or inline box.

Syntax

When the container and the child box have the position value to static, this is called the normal flow.

• Static Container > Static Child

Example

Static > Static = Normal Flow

• The css without any position property to use the default (static) and with the

.box {
    width: 350px;
    border: 2px solid steelblue;
    /* position:static; is not needed, this is the default */
}
.botright {
    border: 2px solid red;
    bottom:0; /* Coordinates properties have no effect in a normal flow */
    right:0; /* Coordinates properties have no effect in a normal flow */
    /* position:static; is not needed, this is the default */
}

<div class="box">
text
    <p class="botright">Bottom Right</p>
text
</div>