Scribd
Upload
75 views16 pages

All About Floats

Float is a CSS positioning property that is used to place elements on the left or right side of their container. It allows text to wrap around images. The float property accepts values of left, right, or none. Clearing the float prevents floated elements from affecting other elements, using the clear property with values of left, right, or both. Floats are commonly used to create web page layouts and place text next to images.

Uploaded by

Neila Hochlef
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
75 views16 pages

All About Floats

Float is a CSS positioning property that is used to place elements on the left or right side of their container. It allows text to wrap around images. The float property accepts values of left, right, or none. Clearing the float prevents floated elements from affecting other elements, using the clear property with values of left, right, or both. Floats are commonly used to create web page layouts and place text next to images.

Uploaded by

Neila Hochlef
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

All About Floats

The Art Of Web

By : Neila Hochlef
What is “Float”?
 Float is a CSS positioning property.
 The CSS float property is used for
controlling the flow of floated elements in
your web page, allowing you to place an
element on the left or right side of its
container.

2
What is “Float”?
 Float is a CSS positioning property.

3
What is “Float”?
 For example, suppose you have a
paragraph (text taken from Wikipedia)
with an image on the left side as follows:

4
What is “Float”?

image-without-float

5
What is “Float”?
 As you can see from the output above,
the image inside the second paragraph is
placed on the left side of the text, but the
text started right at the bottom side of
the image.
 This is because the browser treats both
image and text inside the <p> tag as inline
elements. They are treated as on the same
level.

6
What are floats used for?
 Aside from the simple example of
wrapping text around images, floats can
be used to create entire web layouts.

7
What are floats used for?
 To make, in the example, the text started
at the top side of the image, you can apply
the float:left CSS property to the image
as follows :

8
What are floats used for?
 A floated element is taken out of the
normal element flow but still placed relative
to the container.
 The float property accepts one of the three
possible values:
◦ float:left will place the element on the left side of
its container
◦ float:right will place the element on the right side
of its container
◦ float:none will stop the floating, just like when
you don’t use the property at all

9
Clearing the Float
 Float’s sister property is clear.
 An element that has the clear property
set on it will not move up adjacent to the
float like the float desires, but will move
itself down past the float.

10
Clearing the Float
 In the above example, the sidebar is floated
to the right and is shorter than the main
content area.
 The footer then is required to jump up into
that available space as is required by the float.
 To fix this problem, the footer can be cleared
to ensure it stays beneath both floated
columns.

11
Clearing the Float
#footer {
clear: both;
}

12
Clearing the Float
 The clear property will prevent the
floating element from affecting the
element next to it (in this case,
the footer element won’t be wrapped
together with
the main and sidebar elements)

13
Clearing the Float
 Clear has four valid values as well :
◦ Both is most commonly used, which
clears floats coming from either
direction.
◦ Left and Right can be used to only
clear the float from one direction
respectively.
◦ None is the default.
14
Conclusion
 To conclude, the float property is a
CSS property that’s commonly used
for floating elements.
 It’s particularly useful for creating a
web page layout and placing text next
to an image.

15
Sources :
 https://css-tricks.com/all-about-floats/
 https://sebhastian.com/css-float/

16

You might also like