---
title: "Float properties"
date: "2017-11-11T12:41:23+00:00"
summary: "Learn how to control element positioning with Float, Clear, and Clearfix CSS properties. Master these techniques to create responsive layouts and improve your web design skills."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/float-properties"
id: "c6d230b2-c578-4716-8e12-d52b7312fd17"
---

Table of contents will be added

Set an element to float to the left side or the right side of its parent element.

Float
-----

Use the Float CSS property with the Clear CSS property and Clearfix hack to control the position of an element and its relation to its sibling elements.

### Behavior:

*   Floated elements will float to the left or the right depending on the value set
*   Text and inline elements will wrap around floated elements
*   Elements after a floating element will flow around it. To prevent this, use the **Clear** property
*   If a floated element is taller than the element containing it, the element will overflow outside of its container. Use the **Clearfix** toggle to fix this.

### Options:

*   None - Sets the float property to none
*   Left - Floats the element to the left
*   Right - Floats the element to the right

Find more information at [https://www.w3schools.com/cssref/pr\_class\_float.asp](https://www.w3schools.com/cssref/pr_dim_min-width.asp)

Clear
-----

Set whether an element should be moved down (cleared) below floating elements.

Use the Clear CSS property with the Float CSS property and Clearfix hack to control the position of an element and its relation to its sibling elements.

### Behavior:

*   Clear moves elements next to floating elements below the floated element
*   Clear can be applied to left, right or both sides of an element

### Options:

*   None - Sets the clear property to none
*   Left - Moves the element below elements on the left
*   Right - Moves the element below elements on the right
*   Both - Moves the element below elements on both the right and left

Find more information at [https://developer.mozilla.org/en-US/docs/Web/CSS/clear](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)

Clearfix
--------

Set the Clearfix hack on an element to prevent floated elements contained within it from overflowing outside of the element.

Use the Clearfix hack with the **Float CSS property** and **Clear CSS property** to control the position of an element and its relation to its sibling elements.

### Behavior:

*   Clearfix forces an element to expand around any floated child elements

Find more information at [https://www.w3schools.com/howto/howto\_css\_clearfix.asp](https://www.w3schools.com/howto/howto_css_clearfix.asp)