Float, Clear, Clearfix

After creating new containers and numerous html elements.  It will be helpful to be able to move the elements around on the page.  In the following lesson we will learn different techniques for moving elements around on the page that include: float, clear, margin, and padding.

Float

The float element is very useful to incorporate an image with a block of text.  As the web designer you can decide to float the image to the left or to the right.

  1. Create a paragraph tag
  2. Create an image tag
  3. Link an image with size dimensions
  4. Close the Image
  5. Close the paragraph tag
  6. In the CSS Document set the float value.

See the Pen zKdAoN by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Note:  View the CSS tab in the Codepen example to view the CSS Code.

Clear

The clear element will create space below the element above it, with possible selections of clearing the: left, right, or both.

See the Pen clear-right by jhoffmanbcc (@jhoffmanbcc) on CodePen.


Note:  View the CSS tab in the Codepen example to view the CSS Code.

Clearfix

The clearfix element will modify a class to accommodate an object that may be larger than the designated area.  If you placed an image within a div tag, clearfix will expand the div tag to include the full size of the image.

See the Pen clearfix by jhoffmanbcc (@jhoffmanbcc) on CodePen.


Note:  View the CSS tab in the Codepen example to view the CSS Code.

 

Questions