This exercise that demonstrates the use of the clear property to prevent a containing HTML element from collapsing due to nested floated elements.

  1. Go to codepen.io and log into your account.

  2. Next, go to the button icon at the far right top corner and select the "New pen" option.

  3. In the HTML pane, add a main tag and give it class attribute with value "main".

  4. Within the main tag, add two divs. Give each class attributes, one with value "col1" and the other "col2".

  5. Within each div, type "lorem" and then hit the tab key to produce some placeholder text.

  6. Between where the second div closes and the main tag closes add a break tag with a class attirbute and value "clearfloat". e.g

  7. In the CSS pane create a "main" class selector. Set the background color to red and the min-height property to 50px. e.g. min-height: 50px;

  8. Below the .main class selector, create a "col1" class selector. Set the background color to green, the width property to 500px, and the float property to left.

  9. Below the .col1 class selector, create a "col2" class selector. Set the background color to blue, the width property to 500px, and the float property to left.

Note that, at this point, the floated divs are sticking out beyond the containing main tag. This is where the clear property comes in.

  1. Below the .col2 class selector, create a "clearfloat" class selector. Set the clear property to both. e.g. clear: both;

The red background of the main tag should now "clear" the floated elements.

  1. When done, click the "Save" button.

  2. Click on the "Settings" button. Add the following title "Clearing floats" in the title field. Also, add "html" and "css" tags in the tags field.

  3. Send me your CodePen URL for this exercise via Insight.


967 0 1