Sideway
output.to from Sideway
Draft for Information Only

Content

CSS Flow
 CSS Container
  CSS Display Property
 CSS Inline Flow
  CSS Inline Normal Flow
   Example of CSS Inline Normal Flow
  CSS Inline-Block Flow
   Example of CSS Inline-Block Flow
 CSS Discrete Flow
  CSS Discrete Normal Flow
   Example of CSS Discrete Normal Flow
  CSS Discrete Block Flow
   Example of CSS Discrete Block Flow

CSS Flow

CSS inline flow and CSS discrete flow are two build-in flow features for each CSS containers. The CSS display property can be used to specify the CSS flow of a CSS container.

CSS Container

CSS container is used to hold the presentation content. In general, a CSS container can be placed in a parent CSS container with reference to a reference point either in the virtual inline box of the parent CSS container, or in the virtual plane of the parent CSS container.

CSS Display Property

The selection of reference point for a CSS container can be specified by the CSS display property. For example, both 'inline' or inline-block display property are used to specify a CSS container with reference to a reference point in the virtual inline box of the parent. And 'block' display propety is used to specify a CSS container with reference to a reference point in the virtual plane of the parent CSS container.

Although the naming method used to specify a CSS container may be changed, the three typical CSS containers, 'block' container, 'inline' container, and 'inline-block' container used in CSS level 2 are still the three popular predefined CSS containers.

In CSS level 3 specification, two keyword values are used for the CSS display property instead of the single keyword value used in CSS level 2 specification. The corresponding values are

CSS level 2 (Short 'display')CSS level 3 (Full 'display') inlineinline flow inline-blockinline flow-root blockblock flow

In fact, an 'inline' CSS display property is used to specify an inline normal flow container, a 'block' CSS display property is used to specify an discrete normal flow container, and an 'inline-block' CSS display property is used to specify an inline flow container with additional typical block behaviour.

CSS Inline Flow

There are two types of CSS inline flows, CSS inline normal flow and CSS inline (block) flow. CSS inline normal flow is used to name the flowing of a CSS 'inline' container. While CSS inline block flow or simply CSS inline flow is used to name the flowing of a CSS 'inline-block' container or other inline flowing containers other than CSS 'inline' container.

CSS Inline Normal Flow

A CSS inline normal flow container always flows into the current virtual inline box of the parent CSS container. A CSS container with 'inline' display property is a typical CSS inline normal flow container. A CSS inline normal flow container is considered as a continued container flowing in the parent inline box and is assumed that there is no breakable word between the CSS inline normal flow container and the elements of parent inline box. A CSS inline normal flow container is usually used as an inline decoration wrapper. But a CSS inline normal flow container can also be used as a general purpose inline container to present a grouped presentation. The CSS inline normal flow container will be wrapped on overflow when there is a breakable word, specify the word-wrap property to break-word or other available mechanism.

Example of CSS Inline Normal Flow

Example
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:230px; overflow:auto}
div>div>div {display:inline; background:cyan;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;display:inline; font-size:16px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All inline containers follow the inline normal flow along baseline.
<div><div><div><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
</div></div></div>
All inline containers follow the inline normal flow along baseline.
<div><div><div><span>1Hifg89</span>
<span style="font-size:10px">2Hifg89</span>
<span>3Hifg89</span>
</div></div></div>
All inline containers follow the inline normal flow along baseline.
<div><div><div><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
4AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow.
<div><div><div><span>1Hifg89</span>
<span style="font-size:40px">2Hifg89</span>
3AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and a hyphen in '3'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3-Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and a space in '4'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4 Hifg89</span>
<span>5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and a space in '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5 Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and a space in '6'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span>6 Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '6'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span style="word-wrap:break-word">6Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span style="word-wrap:break-word">5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>121
<span>5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>121
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>11
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>1
<span>5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg891</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>Hg891</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline containers follow the inline normal flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg8</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

CSS Inline-Block Flow

A CSS inline-block flow container always flows into the current virtual inline box of the parent CSS container. A CSS container with 'inline-block' display property is a typical CSS inline-block flow container. A CSS inline-block flow container is only considered as an individual container flowing in the parent inline box continuously and is assumed that there is a hidden breakable word between the CSS inline-block flow container and the elements of parent inline box. A CSS inline-block flow container is usually used as an inline wrapper to insert a general purpose container inside the parent inline box. The inline and individual properties of inline-block flow container enable the inline-block container flowing in the parent inline box and allow the whole inline-block flow container wrapping automatically to a new parent inline box as a single individual container when there is overflow.

Example of CSS Inline-Block Flow

Example
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:230px; overflow:auto}
div>div>div {display:inline; background:cyan;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;display:inline-block; font-size:16px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All inline-block containers follow the inline flow along baseline.
<div><div><div><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
</div></div></div>
All inline-block containers follow the inline flow along baseline.
<div><div><div><span>1Hifg89</span>
<span style="font-size:10px">2Hifg89</span>
<span>3Hifg89</span>
</div></div></div>
All inline-block containers follow the inline flow along baseline.
<div><div><div><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
4AgH</div></div></div>
All inline-block containers follow the inline flow along baseline.
<div><div><div><span>1Hifg89</span>
<span style="font-size:40px">2Hifg89</span>
3AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and a hyphen in '3'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3-Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and a space in '4'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4 Hifg89</span>
<span>5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and a space in '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5 Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and a space in '6'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span>6 Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '6'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span>5Hifg89</span>
<span style="word-wrap:break-word">6Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
<span style="word-wrap:break-word">5Hifg89</span>
<span>6Hifg89</span>
7AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>121
<span>5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>121
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>11
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>1
<span>5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg89</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg891</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>Hg891</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow and "word-wrap:break-word" on '5'.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hg8</span>1
<span style="word-wrap:break-word">5Hifg89</span>
6AgH</div></div></div>
All inline-block containers follow the inline flow along baseline with overflow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89Hifg89Hifg89Hifg89Hifg89Hifg89Hifg89</span>
<span>4Hifg89Hifg89Hifg89Hifg89Hi fg89Hifg89Hifg89</span>1
<span>5Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
<span>5Hifg89Hifg89Hifg89Hifg89Hi-fg89Hifg89Hifg89</span>
<span>6Hifg89Hifg89Hifg89Hifg89Hi,fg89Hifg89Hifg89</span>
7AgH</div></div></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

CSS Discrete Flow

There are two types of CSS discrete flows, CSS discrete normal flow and CSS discrete (block) flow. CSS discrete normal flow is used to name the flowing of a CSS 'block' container. While CSS discrete block flow or simply CSS discrete flow is used to name other discrete flowing containers other than CSS 'block' container. For example 'float' container

CSS Discrete Normal Flow

A CSS discrete normal flow container always flows into the virtual plane of the parent CSS container. A CSS container with 'block' display property is a typical CSS discrete normal flow container. A CSS discrete normal flow container is considered as an individual container flowing in the parent container and is assumed that there are a 'new line' before and a 'carriage return' after. A CSS discrete normal container is usually used as a paragraph wrapper to insert a general purpose container inside the parent container.

Example of CSS Discrete Normal Flow

Example
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:230px; overflow:auto}
div>div>div {display:inline; background:cyan;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;display:block; font-size:16px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All block Containers follow the discrete normal flow.
<div><div><div><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
4AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div style="padding:1px"><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
4AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
5AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span style="width:50px">2Hifg89</span>
<span style="width:50px;word-wrap:break-word">3Hifg89</span>
<span>4Hifg89</span>
5AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span>2Hifg89</span>a
<span>3Hifg89</span>a
<span>4Hifg89Hifg89Hifg89Hifg89Hifg89Hifg89</span>a
<span>5Hifg89</span>a
6AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span style="width:50px">2Hifg89</span>a
<span style="width:50px;word-wrap:break-word">3Hifg89</span>a
<span style="word-break:break-all ">4Hifg89Hifg89Hifg89Hifg89Hifg89Hifg89</span>a
<span style="width:150px">5Hifg89</span>a
6AgH</div></div></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

CSS Discrete Block Flow

A CSS discrete block flow container always flows into the virtual plane of the parent CSS container. A CSS discrete block flow is any CSS discrete flow other than CSS discrete normal flow. A CSS container with 'float' display property not equal to zero is a typical CSS discrete block flow container. A CSS discrete block flow is also part of the discrete flow of the parent container. A CSS block container is considered as an individual container flowing in the parent container and is assumed that there is a hidden breakable word between the CSS discrete block flow container and the other elements of parent container. A CSS block container is usually used as a independent wrapper to insert a general purpose container inside the parent container.

Example of CSS Discrete Block Flow

Example
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {outline:blue 1px solid; font-size:12px; padding:10px; margin:5px}
div {outline:blue 1px solid; margin:10px; overflow:hidden; font-size:25px}
div>div {display:block; outline:red 1px solid;width:230px; overflow:auto}
div>div>div {display:inline; background:cyan;margin:0;padding:0}
div>div>div>span {outline:silver 1px solid;float:left; font-size:16px}
</style>
<title>Sample Page</title>
    </head>
    <body>
All block Containers follow the discrete normal flow.
<div><div><div><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
4AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div style="padding:1px"><span>1Hifg89</span>
<span>2Hifg89</span>
<span>3Hifg89</span>
4AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span>2Hifg89</span>
<span>3Hifg89</span>
<span>4Hifg89</span>
5AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span style="width:50px">2Hifg89</span>
<span style="width:50px;word-wrap:break-word">3Hifg89</span>
<span>4Hifg89</span>
5AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span>2Hifg89</span>a
<span>3Hifg89</span>a
<span>4Hifg89Hifg89Hifg89Hifg89Hifg89Hifg89</span>a
<span>5Hifg89</span>a
6AgH</div></div></div>
All block Containers follow the discrete normal flow.
<div><div><div>1AgH<span style="width:50px">2Hifg89</span>a
<span style="width:50px;word-wrap:break-word">3Hifg89</span>a
<span style="word-break:break-all ">4Hifg89Hifg89Hifg89Hifg89Hifg89Hifg89</span>a
<span style="width:150px">5Hifg89</span>a
6AgH</div></div></div>
    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway

ID: 190500005 Last Updated: 5/5/2019 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 339

Reference 79

Computer

Hardware 249

Software

Application 213

Digitization 32

Latex 52

Manim 205

KB 1

Numeric 19

Programming

Web 289

Unicode 504

HTML 66

CSS 65

SVG 46

ASP.NET 270

OS 429

DeskTop 7

Python 72

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 34

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2024 Sideway . All rights reserved Disclaimers last modified on 06 September 2019