Any URL's added here will be added as
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<header id="banner"> <h1>CSS Layout Practice</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Resources</a></li> </ul> </nav> </header> <main id="content"> <article> <h2>All About Floats</h2> <h3>What is "Float"?</h3> <figure class="canoe"> <img src="https://unsplash.it/300/200?image=1011" alt="Floating in a canoe" /> <figcaption>Word-Wrap is when text flows around something</figcaption> </figure> <p><strong>Float</strong> is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap".</p> <p>In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Floated elements <em>remain a part of the flow of the web page</em>. </p> <p>There are four valid values for the float property. <strong>Left</strong> and <strong>Right</strong> float elements those directions respectively. <strong>None</strong> (the default) ensures the element will not float and <strong>Inherit</strong> which will assume the float value from that elements parent element.</p> <h3>What are floats used for?</h3> <p>Aside from the simple example of wrapping text around images, floats can be used to create <strong>entire web layouts</strong>.</p> <p>Floats are also helpful for layout in smaller instances, like galleries, pullquotes, menus and more.</p> <div class="gallery"> <figure class="gallery-item"> <img src="https://unsplash.it/150/150?image=951"> <figcaption>Boxy Image Grid</figcaption> </figure> <figure class="gallery-item"> <img src="https://unsplash.it/150/150?image=946"> <figcaption>Grid based content</figcaption> </figure> <figure class="gallery-item"> <img src="https://unsplash.it/150/150?image=958"> <figcaption>Complex Grid</figcaption> </figure> <figure class="gallery-item"> <img src="https://unsplash.it/150/150?image=935"> <figcaption>Floated design elements</figcaption> </figure> </div> <h3>Clearing the Float</h3> <img src="https://unsplash.it/150/150?image=1069" alt="Jellyfish float" class="jelly"> <img src="https://unsplash.it/150/150?image=1041" alt="Rootbeer Float" class="wave"> <p>Float's sister property is clear. An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float. Again an illustration probably does more good than words do.</p> <p>In the example, the sidebar is floated to the left and is shorter than the main content area. The footer then is required to jump up into that available space as is required by the float. To fix this problem, the footer can be cleared to ensure it stays beneath both floated columns.</p> <p>Clear has four valid values as well. <strong>Both</strong> is most commonly used, which clears floats coming from either direction. <strong>Left</strong> and <strong>Right</strong> can be used to only clear the float from one direction respectively. <strong>None</strong> is the default, which is typically unnecessary unless removing a clear value from a cascade. <strong>Inherit</strong> would be the fifth, but is strangely not supported in Internet Explorer. Clearing only the left or right float, while less commonly seen in the wild, definitely has its uses.</p> <h3>The Great Collapse</h3> <p>One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.</p> <p>Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float <strong>after</strong> the floated elements in the container but <strong>before</strong> the close of the container.</p> <p><strong>The Clearfix Trick</strong> uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it.</p> </article> </main> <aside id="sidebar"> <section> <h3>Learn More</h3> <ul> <li><a href="https://css-tricks.com/all-about-floats/">CSS Tricks</a></li> <li><a href="http://www.w3schools.com/css/css_float.asp">W3C Float & Clear</a></li> <li><a href="https://developers.google.com/chrome-developer-tools/">Chrome Inspector</a></li> <li><a href="http://getfirebug.com/">Firebug Extension</a></li> <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li> </ul> </section> </aside> <footer id="footer"> <small> © 2015 Platt College. Content adapted from"<a href="https://css-tricks.com/all-about-floats">All About Floats</a>" from CSS Tricks </small> </footer>
Also see: Tab Triggers