Skip to content

Instantly share code, notes, and snippets.

@rfabes21
Last active January 1, 2016 10:09
Show Gist options
  • Save rfabes21/8129746 to your computer and use it in GitHub Desktop.
Save rfabes21/8129746 to your computer and use it in GitHub Desktop.
A short description of the Float property, and its uses.

Floats

Page layouts in webdesign, when they are intended to be fluid, flexible pages, need a way to do that. In page layout programs, boxes that hold images or sidebars can be told to honor the text wrap of other elements, thus creating a fluid web page. In web design, using CSS and the float property, we can tell contaners or images to position in a way that retains that fluidity of the rest of the page. In contrast to this, absolute positioning would disallow that fluidity for that particular element. For instance, an absolutely positioned element would stick on the page where you tell it, and other elements would literally ignore their existance and show on top of, or behind it.

Inputs

The float property can be given either a left or right attribute, which will position it respectively within its parent element. It can also be set to none (default), or Inhereit, which will tell the element to behave with the same float input as its parent.

Clear

The sister property to Float, Clear will make the element that would normally want to fit itself adjacent to a floated element (if there is enough space) ignore that impulse and clear the floated elements to appear below them. An example of this would be content on a page that may be unequal, and a footer that is cleared below those floated elements above, ensureing it is always on the very bottom of the page.

Clear can be given the input left, right, or both, with command it to clear floats on the left or right, or both, respectively.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment