Core CSS

Lesson 8: Float and Clear

Overview

This CSS lesson explains how to position HTML elements via the float and clear properties. Float and clear provide us with a method of positioning that is different from the position property. Here, we will explain how these properties can be used to affect the position of elements.

Default Static Positioning

The default positioning is static, where elements are placed left to right and top to bottom. The element are aligned at the bottom across rows. Positioning with float and clear is similar to static positioning, but it is slightly different. So, I begin with the example below of five image elements that are statically positioned. Then I alter the placement via the float and clear properties to demonstrate the difference.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:550px; height:600px;">
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AllegoryOfTheCatholicFaith_JohannesVermeer.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="CoronationOfTheVirgin_DiegoVelazquez.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="JesusInTheTemple_HeinrichHoffman.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheArtOfPainting_JohannesVermeer.png" />
    <img style="margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheTransfigurationOfOurLord_LodovicoCarracci.png" />
  </body>
</html>
 

Output

 

Float Left

In the example below, all of the elements have been styled with the float:left; specification. As the placement indicates, these elements are not aligned along the bottom like the statically positioned elements. Moreover, the fourth element is stuck on the third element. This causes the fifth element to be placed into a new row and gives the whole composition a sloppy appearence.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:550px; height:600px;">
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AllegoryOfTheCatholicFaith_JohannesVermeer.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="CoronationOfTheVirgin_DiegoVelazquez.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="JesusInTheTemple_HeinrichHoffman.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheArtOfPainting_JohannesVermeer.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheTransfigurationOfOurLord_LodovicoCarracci.png" />
  </body>
</html>
 

Output

 

Clear Left

To fix the problem with the sloppy appearence of the previous example, I have added a clear:left; designation to the fourth element. This causes the fourth element to be moved down below the lowest edge of the elements in the first row and all the way to the left side. Likewise, it does the same things to the fifth element elements after a cleared element are also cleared.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:550px; height:600px;">
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AllegoryOfTheCatholicFaith_JohannesVermeer.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="CoronationOfTheVirgin_DiegoVelazquez.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="JesusInTheTemple_HeinrichHoffman.png" />
    <img style="clear:left;float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheArtOfPainting_JohannesVermeer.png" />
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheTransfigurationOfOurLord_LodovicoCarracci.png" />
  </body>
</html>
 

Output

 

Float Right and Left

In this example, I added a float:left; to the first element and float:right; to the rest of the elements. This causes the first element to be placed in the upper-left corner. Then the next element is placed in the upper-right corner by the float:right;. The remaining elements are placed to the left of the second one and the fourth one gets caught on the third element, while the fifth element is moved down by the element on the left side. Placing elements like this can cause the elements to be placed erratically, due to the difference in the sizes of elements. To fixed this, we can use the clear:both; designation, as I do in the next example.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:550px; height:600px;">
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AllegoryOfTheCatholicFaith_JohannesVermeer.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="CoronationOfTheVirgin_DiegoVelazquez.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="JesusInTheTemple_HeinrichHoffman.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheArtOfPainting_JohannesVermeer.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheTransfigurationOfOurLord_LodovicoCarracci.png" />
  </body>
</html>
 

Output

 

Clear Both

In this example, I added a clear:both; designation to the third element. This causes the third element to be place below all of the elements on both the left and right and pushes it all the way to the right, due to the float:right; designation. The rest of the elements are then placed next to it to the left of that one.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net CSS</title>
  </head>
  <body style="border:1px gray solid; width:550px; height:600px;">
    <img style="float:left;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="AllegoryOfTheCatholicFaith_JohannesVermeer.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="JesusInTheTemple_HeinrichHoffman.png" />
    <img style="clear:both;float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="CoronationOfTheVirgin_DiegoVelazquez.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheArtOfPainting_JohannesVermeer.png" />
    <img style="float:right;margin:5px; padding: 10px; border: 2px black solid;
      background-color:sienna;"
      src="TheTransfigurationOfOurLord_LodovicoCarracci.png" />
  </body>
</html>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.