CSS Float

The float property in CSS is used to specify how an element should float to the left or right inside its containing element.

This property is commonly used for creating layouts where elements can wrap around each other or where content can flow around a floated element.

Float Property:

float: left;: Floats the element to the left side.

float: right;: Floats the element to the right side.

float: none;: Default value. The element does not float.

Clear Property:

clear: left;: Specifies that the element should not float on the left side of other floated elements.

clear: right;: Specifies that the element should not float on the right side of other floated elements.

clear: both;: Specifies that the element should not float on either side of other floated elements.

clear: none;: Default value. The element can float on both sides of other floated elements.

Float Behavior:

When an element is floated, it is removed from the normal document flow and positioned to the left or right as specified.

Other content will flow around the floated element unless the clear property is used to prevent this behaviour.

Floated elements can affect the layout of their parent container and other sibling elements, potentially causing layout issues if not properly managed.

To contain floated elements within their parent container, you may need to use techniques like clear fix or use the overflow property set to auto or hidden on the parent container.

CSS Syntax:


/* Clear floats */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Float an element to the left */
.float-left {
  float: left;
}

/* Float an element to the right */
.float-right {
  float: right;
}

HTML Syntax:

<div class="clearfix"></div>
<div class="float-left">Float Left</div>
<div class="float-right">Float Right</div>

<-- Display Properties

Button -->