Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Float and Clear

The `clear` property defines the sides of a block where floated blocks cannot occur.

Example 4.10 - clear: none; - Example 4.10 (Without Styles) | <p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>p { clear: none; line-height: 1.5em; border: thin solid red; } img { float: right; border: thin dotted black; padding: 5px; }

- Markup
- Style
- Screenshot

    <p><img src="images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p>
    <p><img src="images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>
    <p><img src="images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis.</p>

In `style` element (`<style type="text/css">`) within `head` element:

    p {
      clear: none;
      line-height: 1.5em;
      border: thin solid red;
    }
    img {
      float: right;
      border: thin dotted black;
      padding: 5px;
    }

Example 4.11 - clear: right; - Example 4.11 (Without Styles) | <p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p><img src="http://cscie12.dce.harvard.edu/resources/images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis. </p>p { clear: right; line-height: 1.5em; border: thin solid red; } img { float: right; border: thin dotted black; padding: 5px; }

- Markup
- Style
- Screenshot

    <p><img src="images/777-t-1.jpg" alt="777"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p>
    <p><img src="images/777-t-2.jpg" alt="777"/>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p>
    <p><img src="images/777-t-3.jpg" alt="777"/>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Nulla vulputate, erat nec tempor mollis, augue metus feugiat urna, id nonummy velit arcu in metus. Donec nonummy, pede non convallis commodo, enim velit ornare nulla, vitae suscipit risus urna eget magna. Maecenas aliquam arcu ac turpis.</p>

In `style` element (`<style type="text/css">`) within `head` element:

    p {
      clear: right;
      line-height: 1.5em;
      border: thin solid red;
    }
    img {
      float: right;
      border: thin dotted black;
      padding: 5px;
    }

Copyright © David Heitmeyer