Version:

    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

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.