CSS Float Property Keyword: Flow

CSS Float: Positioning Property Purpose: Push a block-level element to the left or right, taking it out of the flow in relation to other elements - allowing naturally flowing content to ‘wrap’ around the floated element. The Float property eliminates HTML table-like design.

What are Floats used for? Wrapping text around images Floats can be used to create entire web layouts. Floats are helpful for smaller instances like positioning avatars and, when the image changes size, the text will reflow to accommodate.

SYNTAX The float CSS property can accept 4 values being: left, right, none and inherit. #sidebar { float: left; } The most commonly used values are left and right. A value of none is the default. The inherit value which can be applied to nearly any CSS property doesn’t work in Int Explorer.

Common Use As well as creating a flowing and cohesive layout, one of the most common uses for the float property is to text-wrap an image. CSS: img { float: left; margin: 0 10px 5px 0; border: solid; }

How Elements Float Elements are floated horizontally, meaning an element can be floated left or right – not top or down. A floated element can be floated as far left or right as possible within its containing element. This means the elements after the floating element will flow around it and the elements before the floating element will not be affected.

Example of Basic CSS Float Property: If an image is floated to the right, the following text flows around it to the left. Code: img { float: right; } Result: Some text some text some text some text some text

Floating Elements Next to Each Other If you place several floating elements next to each other and there is room in the browser, they will float next to each other as shown: Code:.thumbnail { float: left; width: 110px; height: 90px; margin: 5px; }

CSS Float Info CSS Float property took a sudden important role when developers started to use HTML without tables. Reason? By default, block-line elements would not line up beside one another in a column-based format. Since columns are necessary in most CSS layouts, the float property became widely used. The CSS Float property allows a developer to incorporate table-like columns in a HTML layout without the use of tables allowing flowing content. Without the Float property, CSS layouts wouldn’t be possible except for using absolute and relative positioning – leaving a messy and unmaintainable layout. Floats sister is clear (in brief moves adjacent to the float but will move itself down past the float.

Relative Links: Smashing Magazine: W3schools: Learn Layout (CSS Fundamentals): CSS Tricks: