CSS Layout Properties (display,float,clear,visibility,overflow,overflow-x,overflow-y)

display: none | inline | Block | List-item | Inline-block | Table | inline-table | table-caption | Table-cell | Table-row | Table-row-group | Table-column | Table-column-group | Table-footer-group | Table-header-group | Run-in | Box | Inline-box | Flexbox | Inline-flexbox | Flex | Inline-flex

default value : inline

applies to : all elements

Inheritance : None

Animation : No

Computed value : Specifies the value, except for floating, absolute positioning, and root element

Value:

None

hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden

Inline

Specifies that the object is an inline element.

Block

Specifies that the object is a block element.

List-item:

Specifies that the object is a list item.

Inline-block:

Specifies that the object is an inline block element. (CSS2)

Table

specifies the object as a table at the block element level. Similar to HTML tags <table> (CSS2)

Inline-table:

specifies the object as an inline element-level table. Similar to HTML tags <table> (CSS2)

Table-caption:

specifies the object as the table caption. Similar to HTML tags <caption> (CSS2)

Table-cell:

specifies the object as a table cell. Similar to HTML tags <td> (CSS2)

Table-row:

specifies the object as a table row. Similar to HTML tags <tr> (CSS2)

Table-row-group:

specifies the object as a table row group. Similar to HTML tags <tbody> (CSS2)

Table-column:

specifies the object as a table column. Similar to HTML tags <col> (CSS2)

Table-column-group:

Specifies that the object is displayed as a table column group. Similar to HTML tags <colgroup> (CSS2)

Table-header-group:

specifies the object as a table header group. Similar to HTML tags <thead> (CSS2)

Table-footer-group:

specifies the object as the table footer group. Similar to HTML tags <tfoot> (CSS2)

Run-in:

determines whether an object is an inline object or a block-level object, depending on the context. (CSS3)

Box

displays the object as an elastic telescopic box. (the oldest version of the Telescopic box) (CSS3)

Inline-box:

the object is displayed as an inline block-level elastic expansion box. (the oldest version of the Telescopic box) (CSS3)

Flexbox

displays the object as an elastic telescopic box. (Telescopic box transition version) (CSS3)

Inline-flexbox:

the object is displayed as an inline block-level elastic expansion box. (Telescopic box transition version) (CSS3)

Flex:

displays the object as an elastic telescopic box. (Latest version of Telescopic box) (CSS3)

Inline-flex:

the object is displayed as an inline block-level elastic expansion box. (Latest version of Telescopic box) (CSS3)

float: none | Left | Right

default value : None

applies to : all elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

None

Set object does not float

Left

Set object floats to the left

Right

Set object floats to the right

Description The value of this property indicates whether and how the object floats. See the Clear property

• If float is not none, when display:inline-table, display calculates the value of table; when Display:inline | Inline-block | Run-in | When the table-* is in the system, display calculates the block, and the other case is the specified value;
• Float does not take effect when absolute positioning and display are none.
• The corresponding script attribute is stylefloat(IE) or cssfloat(non IE). (Note that this is stylefloat or cssfloat, not float)

clear: none | Left | Right | Both

default value : None

applies to : block-level elements

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

None

Allowed to have floating objects on both sides

Both

Floating objects are not allowed

Left

Floating objects on the left are not allowed

Right

floating objects on the right are not allowed

Description The value of this property indicates that the edge of a floating object is not allowed. See Float property

• The corresponding script attribute is clear.

visibility: Visible | Hidden | Collapse

Default value : Visible

applies to : all elements

inheritance : There are

Animation : Yes

Calculated value : Specify a value

Value:

Visible

Set Object Visual

Hidden

Set Object hiding

Collapse

a row or column that is used primarily to hide a table. Hidden rows or columns can be used by other content. For other objects outside the table, the action is equivalent to hidden.

Description Sets or retrieves whether the object is displayed. Unlike the display property, this property retains the physical space it occupies for hidden objects

• If you want the object to be visual, its parent object must also be visible.
• The corresponding script attribute is visibility.

overflow:<overflow-style>

<overflow-style> = Visible | Hidden | Scroll | Auto | Paged-x | paged-y | Paged-x-controls | Paged-y-controls | Fragments

Default value : Visible

suitable for: block container, Telescopic box container, Grid container

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

Visible

The content may be out of the container if the overflow content is not processed.

Hidden

Hides the contents of the overflow container and does not appear with scroll bars.

Scroll

Hides the contents of the overflow container, and the overflow content is rendered as a scrolling scroll bar.

Auto

When the content does not overflow the container without a scrollbar, scroll bars appear when the content overflows the container, and scroll bars appear on demand. This is the default value for the body object and textarea.

Paged-x:

Todo... (CSS3)

Paged-y:

Todo... (CSS3)

Paged-x-controls:

Todo... (CSS3)

Paged-y-controls:

Todo... (CSS3)

Fragments:

TODO ... (CSS3)

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Description Composite properties. Retrieves or sets how the object handles overflow content. See Overflow-x, Overflow-y Properties

• The overflow effect is equivalent to Overflow-x + overflow-y.
• For table, if the Table-layout property is set to fixed, the TD object supports a overflow property with a default value of hidden. If set to Hidden,scroll or auto, then the content beyond the TD size will be clipped. If set to visible, causes additional text to overflow to the right or left (depending on the direction property setting) of the cell.
• The corresponding script attribute is overflow.

overflow-x:<overflow-style>

<overflow-style> = Visible | Hidden | Scroll | Auto | Paged-x | paged-y | Paged-x-controls | Paged-y-controls | Fragments

Default value : Visible

suitable for: block container, Telescopic box container, Grid container

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

Visible

The content may be out of the container if the overflow content is not processed.

Hidden

Hides the contents of the overflow container and does not appear with scroll bars.

Scroll

Hides the contents of the overflow container, and the overflow content is rendered as a scrolling scroll bar.

Auto

When the content does not overflow the container without a scrollbar, scroll bars appear when the content overflows the container, and scroll bars appear on demand. This is the default value for the body object and textarea.

Paged-x:

Todo... (CSS3)

Paged-y:

Todo... (CSS3)

Paged-x-controls:

Todo... (CSS3)

Paged-y-controls:

Todo... (CSS3)

Fragments:

TODO ... (CSS3)

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Description retrieves or sets how the object handles horizontal overflow content. See Overflow, overflow-y properties

• The corresponding script attribute is overflowx.

overflow-y:<overflow-style>

<overflow-style> = Visible | Hidden | Scroll | Auto | Paged-x | paged-y | Paged-x-controls | Paged-y-controls | Fragments

Default value : Visible

suitable for: block container, Telescopic box container, Grid container

Inheritance : None

Animation : No

Calculated value : Specify a value

Value:

Visible

The content may be out of the container if the overflow content is not processed.

Hidden

Hides the contents of the overflow container and does not appear with scroll bars.

Scroll

Hides the contents of the overflow container, and the overflow content is rendered as a scrolling scroll bar.

Auto

When the content does not overflow the container without a scrollbar, scroll bars appear when the content overflows the container, and scroll bars appear on demand. This is the default value for the body object and textarea.

Paged-x:

Todo... (CSS3)

Paged-y:

Todo... (CSS3)

Paged-x-controls:

Todo... (CSS3)

Paged-y-controls:

Todo... (CSS3)

Fragments:

TODO ... (CSS3)

* CSS3 new properties may be described errors and changes, for reference only, continuous update

Description retrieves or sets how the object handles vertical overflow content. See Overflow, Overflow-x properties

• The corresponding script attribute is overflowy.

CSS Layout Properties (display,float,clear,visibility,overflow,overflow-x,overflow-y)