Introduction to CSS Float
CSS Float properties help you to align the HTML content to the right and left. The basic idea of alignment and float is similar, but there is a slight difference between them.
Actually, the alignment properties apply to the content of the box e.g. the text-align property aligns the text only, while the float property floats the whole Box Model.
The CSS Float property has two values, left and right. You cannot float the sections to the top or bottom. In addition to this, you can define the padding and margin to place the content at the right spot!
Float – right
Floating to the right will place the content on the right side of page. Here’s the demonstration of it:
CSS is the language for modifying the presentation of Web pages, including colors, layout, and fonts. It also allows the designer to modify the presentation of the website to different types of devices, such as large screens (laptops, tv), small screens (mobile, Iphone, tablet), or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across different pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
We applied float:right property to img and image floated over to the right. The floating property automatically creates a default margin from the other content. As you can see, the image covers only its space and the rest of the text appears normally. Similarly, you can apply Left property to the image.
Clear – Float
Usually, when you use the floating property, it flows around the page with the other elements. To remove that behavior, you can use the clear property. Basically, you remove the effect/impact of floating from the other HTML elements. This clear property can affect from the right, left, or both. Here’s the demonstration:
CSS is the language for modifying the presentation of Web pages, including colors, layout, and fonts.
It also allows the designer to modify the presentation of the website to different types of devices, such as large screens (laptops, tv), small screens (mobile, Iphone, tablet), or printers. CSS is independent of HTML and can be used with any XML-based markup language.
You can see that the clear property has cleared the spaced between image and next paragraph. We reduced the size of the image to give you a better visualization of how clear property works. You can remove the floating effect from the top, bottom, right and left.
[toltip]Important Tip: Always use the clear:both; property at the end before beginning a new section. For example, when you’re moving from the content to the footer section, use this property before beginning the footer section. This will remove the effect of the floating property over the footer.[/tooltip]
- CSS Float property floats HTML content right and left.
- Use float:right; to move content to the right side of page.
- Use float:left; property to move content to the left side of page.
- Use clear property to remove the effect of the floating property on other sections of your webpage.
In the next lesson you will learn about the CSS Cursor property.