CSS Properties: Display, Float, Overflow

1. Display

Inline Example:

Inline 1 Inline 2 Inline 3

Block Example:

Block 1

Block 2

Inline-block Example:

Box 1

Box 2

Box 3

None Example:

This text is hidden using display: none.

2. Float

Left 1

Left 2

Right

This paragraph text flows around the floated boxes. Floats are often used for layouts and images.

3. Overflow

Visible (default):

This is some long text that will overflow the box boundaries and remain visible outside the box.

Hidden:

This is some long text that will be cut off and hidden when it overflows the box boundaries.

Scroll:

This is some long text that will make the container scrollable when it overflows the box boundaries. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.

Auto:

This is some long text that will add scrollbars only if needed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.