Float properties

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

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

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