Welcome Guest! (App Version 3.1)

websitnero logo name

Float and Clear

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.

none | left | right

Example

<head>
<style>
p{width:100px; height:100px;}
.p1{background:yellow; float:left}
.p2{background:pink; float:right}
</style>
</head>

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

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!

none | left | right | both | inline-start | inline-end

Example

<head>
<style>
p{width:100px;height:100px;}
.p1{background:yellow;float:left;}
.p2{background:pink;float:left;}
.p3{background:blue;float:left;}
.p4{background:orange;float:left;clear:both;}
</style>
</head>

<body> 
<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> 
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.