Basics of CSS Float

1. Introduction

After completing this module, you are expected to:

          At this point, you have learned dozens of CSS properties that allow      you to change the appearance of text elements and the boxes they generate. But so far, we have merely been decorating elements as they appear in the flow of the document.

          In this module, we will look at floating, the CSS methods for breaking out of the normal flow and arranging elements on the page. Floating an element moves it to the left or right, and allows the following text to wrap around it.

          We will start by examining the properties responsible for floating, so you will get a good feel for how the CSS layout tools work.

          Before we start moving elements around, let’s be sure we are well acquainted with how they behave in the normal flow.