CSS - The Float Property

In CSS, the float property is used to specify whether an element should float to the left or right of its parent container. The value of the float property can be set to left, right, or none (the default value).

When an element is floated, other elements will flow around it and it will be taken out of the normal flow of the document. This is often used for creating multi-column layouts, as well as for positioning elements on a page.

float: right

float: right; is a CSS property that is used to make an element float to the right of its parent container. When an element is floated to the right, other elements will flow around it and will be positioned to the left of the floated element.

To use float: right;, you would first select the element(s) you want to float using a CSS selector, and then apply the float: right; property to that selection.

For example:

img {
  float: right;
}

This would float all img elements to the right of their parent container.

<div>
  <p>Some text here</p>
  <img src="image.jpg" alt="image">
</div>

This example will float the image to the right of the text

It's important to keep in mind that when an element is floated, it is removed from the normal flow of the document, so you may need to add additional CSS to clear any other elements that are affected by the float.

float: left

float: left; is a CSS property that is used to make an element float to the left of its parent container. When an element is floated to the left, other elements will flow around it and will be positioned to the right of the floated element.

To use float: left;, you would first select the element(s) you want to float using a CSS selector, and then apply the float: left; property to that selection.

For example:

img {
  float: left;
}

This would float all img elements to the left of their parent container.

<div>
  <img src="image.jpg" alt="image">
  <p>Some text here</p>
</div>

This example will float the image to the left of the text

float: none

float: none; is a CSS property that is used to remove the float from an element. When an element has a float: none; value, it will be positioned in the normal flow of the document and will not float to the left or right of its parent container.

To use float: none;, you would first select the element(s) you want to remove the float from using a CSS selector, and then apply the float: none; property to that selection.

For example:

img {
  float: none;
}

This would remove float from all <img> elements and they will be positioned in the normal flow of the document.

It's important to keep in mind that float: none; will only remove the float from an element that has previously been floated. If an element has not been floated, float: none; will have no effect on it.

Also, using this property can be useful to clear any floats that were used before, so that the following elements are not affected by the previous floats.

The clear property

The clear property in CSS is used to specify on which side(s) of an element floating elements are not allowed to be positioned. The value of the clear property can be set to left, right, both, or none (the default value).

When an element has a clear: left; value, no floating elements are allowed on the left side of it. Similarly, when an element has a clear: right; value, no floating elements are allowed on the right side of it. When the value is clear: both;, no floating elements are allowed on either side of it.

To use the clear property, you would first select the element(s) you want to apply the clear property, and then apply the clear property with a value to that selection.

For example:

div {
  clear: both;
}

This would make no floating elements allowed on either side of the <div> elements.

<div>
  <img src="image.jpg" alt="image" style="float:left;">
  <p>Some text here</p>
  <div style="clear:both;"></div>
  <p>This text will not be affected by the previous float</p>
</div>

This example will clear any floats before the second <p> element.

It's important to note that using the clear property can be useful when there are previous floats that are affecting the layout of the elements that come after them.

The clear property can be used to push the following elements down, and make them not affected by the previous floats.

CSS Basics