Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Float and Clear

HTML

<h1>Float</h1>

<div>

<div class="float left clear-left" >Float Left </div>

<div class="float right clear-right">Float Right</div>

<p class="clear-none">This paragraph does not clear floats.

<span class="float right clear-right">Float Right - cleared right</span>

<span class="float ight clear-none" >Float Right - NOT cleared</span></p>

<p class="clear-left">This paragraph clears floats on its left side.</p>

<div class="float left clear-left">Float Left - cleared left</div>

<div class="float left clear-none">Float Left - NOT cleared</div>

<p class="clear-right">This paragraph clears floats on its right side.

<span class="float left clear-left">Float Left </span>

<span class="float right clear-right">Float Right</span></p>

<p class="clear-both">This paragraph clears floats on both sides.</p> </div>

CSS

*.float { margin:0px 10px; width:120px; background-color:yellow; color:black; }

*.left { float:left; }

*.right { float:right; }

*.clear-left { clear:left; }

*.clear-right { clear:right; }

*.clear-both { clear:both; }

*.clear-none { clear:none; }

/* Nonessential rules are not shown. */