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: 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: 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: 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:
Nu Html Checker 
53 
na 
na
