WDD 130: Web Fundamentals

W03 Learning Activities: CSS Layouts – Float

Overview

The CSS float property should be used for specific purposes and not for general layout on a page. For example, floating related images to the left or right inside containers with paragraphs or other article content would be appropriate. The element is removed from the normal flow layout when floated.

Prepare

float: right;
margin: 20px;

CSS Float is a property that can be applied to elements to remove them from the normal flow of the page and allow other elements to wrap around them. The float property can be applied to block-level elements and inline elements. The float property can be set to left or right to move the element to the left or right in the document flow. For example, this code block in this paragraph is floated to the right and contains a shorthand margin declaration that applies a margin on all sides of the element.

• By default, the CSS float property is none. There is no need to apply the float declaration unless you intend to float the element.
• To avoid unexpected layout issues, using the clear declaration to manage elements following a floated element as needed.

Activity Instructions

1. Open the file named float.html in the week03 folder.
2. Also, open the linked CSS file named float.css found in the styles subfolder.
3. Which HTML element was the float applied?
   Check Your Understanding

   The float is applied to the img element that was embedded inside the div element with the class of col1.

4. What would happen if you applied the clear: both; property to the footer selector in CSS? Try it!
   Check Your Understanding

   The footer element content would move back to the normal flow in relation to the floated img.