CSS Float

Advertisements

Prev Tutorial Next Tutorial

CSS Float

The CSS float property is a positioning property. It is used to push an element to the left or right, allowing other element to wrap around it. It is generally used with images and layouts.

How it works

Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.

  • A floated element may be moved as far to the left or the right as possible. Simply, it means that a floated element can display at extreme left or extreme right.
  • The elements after the floating element will flow around it.
  • The elements before the floating element will not be affected.
  • If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right.

CSS Float Properties

PropertyDescriptionValues
clearThe clear property is used to avoid elements after the floating elements which flow around it.left, right, both, none, inherit
floatIt specifies whether the box should float or not.left, right, none, inherit

CSS Float Property Values

ValuesDescription
noneIt specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a default value.
leftIt is used to float the element to the left.
rightIt is used to float the element to the right.
initialIt sets the property to its initial value.
inheritIt is used to inherit this property from its parent element.

Example: float image

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img{
 float:right;	
}
</style>  
</head>  
<body>  
<p>Float image from right</p>
</body>  
</html>

Output

Float image from right

logo

Browser supported

Properties
floatYesYesYesYesYes

Prev Tutorial Next Tutorial

Google Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements