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.

Content that follows floating elements

The clear property in CSS is used to control how elements behave around floating elements. When you use the float property to move elements to the left or right side of their container, other elements will wrap around them. The clear property allows you to stop this wrapping behavior and force an element to come below any floating elements.

When using clear: left on an element, it will move below any floating elements that are positioned on the left side, ensuring that no left-floating elements appear beside it on the left. Similarly, clear: right makes the element come below any right-floating elements, and clear: both will ensure that the element comes below all floating elements on either side.

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.