Scribd
Upload
31 views

Positioning Content

The CSS float property specifies how elements should float within a container. The clear property specifies which sides of a cleared element floating elements are not allowed to float beside. Floating elements can be used to position content, such as images, next to text. The clear property matches the float, clearing left if the float is left. A clearfix can be used to contain floated elements within their parent container.

Uploaded by

Yodomax Ftw
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
31 views

Positioning Content

The CSS float property specifies how elements should float within a container. The clear property specifies which sides of a cleared element floating elements are not allowed to float beside. Floating elements can be used to position content, such as images, next to text. The clear property matches the float, clearing left if the float is left. A clearfix can be used to contain floated elements within their parent container.

Uploaded by

Yodomax Ftw
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Positioning Content

Floating property
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and
on which side.
The float property is used for positioning and formatting content e.g. let an image float left
to the text in a container.

The float property can have one of the following values:


left - The element floats to the left of its container
right- The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is
default
Floating property
Clear property
The clear property specifies what elements can float beside the cleared
element and on which side.
The clear property can have one of the following values:

none - Allows floating elements on both sides. This is default


left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
Clear property
When clearing floats, you should match the clear to the float: If an element is floated to the left,
then you should clear to the left. Your floated element will continue to float, but the cleared
element will appear below it on the web page.
Clearfix property
If an element is taller than the element containing it, and it is floated, it will "overflow"
outside of its container:
Without clearfix With clearfix

.clearfix {
overflow: auto;
}
Clear property

With the float property, it is easy to float boxes of


content side by side:
The display: inline-block Value

Compared to display: inline, the major difference is that display:


inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom
margins/paddings are respected, but with display: inline they are
not.
Compared to display: block, the major difference is that display:
inline-block does not add a line-break after the element, so the
element can sit next to other elements.
The display: inline-block Value
Example that shows the different behavior between display: inline,
display: inline-block and display:block:
Exercises

You might also like