CSS - float Property

Quiz

CSS float property controls the positioning and formatting of content on the page. It positions an element either on the right or left side of the container, letting text and other inline elements to wrap around it. Absolutely positioned elements are not affected by this property.

Syntax

float: none | left | right | initial | inherit;

Property Values

Value	Description
none	The element does not float. Default value.
left	The element floats to the left of its container.
right	The element floats to the right of its container.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Float Property

The following examples explain the float property with different values.

CSS Float Property with None Value

To prevent the positioning of an element to the left or right of the container, we use the none value. The none value ensures that the element is not floated and remains in the normal document flow. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container img {
         float: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: none
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150/>
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

CSS Float Property with Left Value

To position an element to the left of the container, we use the left value. The left value positions the element to the left with the surrounding elements wrapping around it, to prevent this wrapping we can use the clear property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container img {
         float: left;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: left
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150/>
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

CSS Float Property with Right Value

To position an element to the left of the container, we use the right value. The right value positions the element to the right with the surrounding elements wrapping around it, to prevent this wrapping we can use the clear property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container img {
         float: right;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: right
   </h4>
   <div class="float-container">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150/>
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

Using Clear Property with Float Property

The float property positions elements to the left or right, due to this the surrounding elements wrap around the elements. To prevent this wrapping, we can use the clear which makes them appear below the floated elements. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-container {
         background-color: lightgreen;
         padding: 20px;
      }

      .float-container1 img {
         float: left;
      }

      .float-container1 p {
         clear: left;
      }

      .float-container2 img {
         float: right;
      }

      .float-container2 p {
         clear: right;
      }

      .float-container3 #left {
         float: left;
      }

      .float-container3 #right {
         float: right;
      }

      .float-container3 p {
         clear: both;
      }
   </style>
</head>

<body>
   <h2>
      CSS float property
   </h2>
   <h4>
      float: left, clear: left
   </h4>
   <div class="float-container float-container1">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 />
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
   <h4>
      float: right, clear: right
   </h4>
   <div class="float-container float-container2">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 />
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
   <h4>
      float: left, right, clear: both
   </h4>
   <div class=" float-container float-container3">
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 id="left" />
      <img src="/css/images/tutimg.png" 
      alt="tutorials" height=150 width=150 id="right" />
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials on a wide range of topics,
         including programming, web development, and digital
         marketing. It provides structured courses with 
         easy-to-understand explanations, practical examples,
         and interactive exercises. Designed for learners at
         various levels, TutorialsPoint supports self-paced
         learning through its extensive library of resources,
         including text-based tutorials and coding exercises.
         The platform aims to help users enhance their kills
         and knowledge in diverse fields through accessible
         and practical educational content.
      </p>
   </div>
</body>

</html>

Supported Browsers

Property
float	1.0	4.0	1.0	1.0	7.0

css_reference.htm

Print Page