CSS Float

Next ❯Vertical Align

Used to push an element to left or right

  • turned_in_notFloat Related Properties
    • float
    • clear
  • float property specifies whether or not an element should float
  • clear property is used to avoid the behavior of floating element
  • clear property mainly used in elements after the element having float property
  • clear value defines at which value of float value, the current element will not be affected
leaf

I am only using clear property,The above image is using only float property,Get affected only when value of clear != float

img {
  float:none;
  height:90px;
}
p{
  clear:none;
  background-color:pink;
}
floatsubject
floatclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  float:none;
  height:90px;
}
p{
  clear:none;
  background-color:pink;
}
</style>
</head>
<body>
  <img src="image.png" alt="leaf"> 
  <p>I am only using <b>clear</b> property,
  The above image is using only <b>float</b> property,
  Get affected only when value of 
  <span style="color:red">clear != float</span>
  </p>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    float:
    clear:
    • clear:both means left and right

  • Vertical Align
❮ Prev CSS Overflow
Next ❯Vertical Align
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯