Welcome Guest! (App Version 5.16)

websitnero logo name

Float and Clear

Overview

  • float makes an element float to the left or right side inside its container, break its normal flow but still be placed inside its parent only.
  • clear property removes all affect of float.

Float Property in CSS

Float property makes an element go out of the normal flow and move to extreme left or right. Therefore we can say that float has 2 possible values -- 'left' or 'right'.

Note: "It is never a good habit to use floats to align elements. Use floats only as the last option."

Float also dramatically affects other elements after it, so it is a good habit to clear floats as soon as its container (in which element with float property exists) ends.

Example

<head>
<style>
  .p1{background:yellow; float:left;}
  .p2{background:pink; float:right;}
</style>
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
</body> 

Output:

This is paragraph 1.

This is paragraph 2.

Clearing the Float

Clear property helps in removing the float behavior of the elements and makes a new element start on a new line than absorbing the float effect of its predecessor element. So, on applying clear (value as left, right or both) the effect of floating washes off!

Example

<head>
<style>
img{float:left;}
.p1{background:yellow;}
.p2{background:pink;}
.p3{background:blue;}
.p4{background:orange;/*clear:both*/}
</style>
</head>

<body> 
<img src="flag.png">
<p class="p1">This is paragraph 1.</p>
<p class="p2">This is paragraph 2.</p>
<p class="p3">This is paragraph 3.</p>
<p class="p4">This is paragraph 4.</p>
</body> 

Output-1: (without clear:both)

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

Output-2: (with clear:both)

This is paragraph 1.

This is paragraph 2.

This is paragraph 3.

This is paragraph 4.

Further Reading

1. Float CSS Property

2. Clear property

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.