DevTips - Floats

devtips-floats.markdown

DevTips - Floats

A Pen by DevTips on CodePen.

License.

index.html

<h1>No Floats</h1>

<p>
<img  src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec.</p>

<hr>


<h1>Float: Left;</h1>
<p>
<img class="float-left" src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla.
</p>

<hr>



<h1>Float: Right;</h1>
<p>
<img class="float-right" src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla.
</p>

<hr>




<h1>Two objects, Float: Left;</h1>
<p>
<img class="float-left" src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
<img class="float-left" src="https://yt3.ggpht.com/-47U43a3eNW0/AAAAAAAAAAI/AAAAAAAAAAA/fWgb7mKcn6k/s100-c-k-no/photo.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla.
</p>

<hr>




<h1>Two objects, Float: Right;</h1>
<p>
<img class="float-right" src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
<img class="float-right" src="https://yt3.ggpht.com/-47U43a3eNW0/AAAAAAAAAAI/AAAAAAAAAAA/fWgb7mKcn6k/s100-c-k-no/photo.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla.
</p>

<hr>




<h1>No floats, No words</h1>
<div class="show-bg">
<img src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
</div>

<hr>



<h1>Float: left; No words</h1>
<div class="show-bg">
<img class="float-left" src="https://yt3.ggpht.com/-5aj55jp4Jm8/AAAAAAAAAAI/AAAAAAAAAAA/aMg0g6GjNJ8/s100-c-k-no/photo.jpg">
</div>

<hr>




<h1>How big is a float?</h1>
<div class="show-bg">
  <div class="float-left sup">As small as it can be.</div>

</div>

<hr>



<h1>Many floats, Not floating</h1>
<div class="show-bg">
  <div class="float-left box-wide"></div>
  <div class="float-left box-wide"></div>
  <div class="float-left box-wide"></div>
  <div class="float-left box-wide"></div>
</div>

<hr>



<h1>Many floats, No words</h1>
<div class="show-bg">
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
</div>

<hr>



<h1>Many floats, No words + last one clear</h1>
<div class="show-bg">
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box clear"></div>
</div>

<hr>



<h1>Many floats, No words + invisible non floating clearing object</h1>
<div class="show-bg">
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="clear"></div>
</div>
<p>Hello I am other content</p>
<hr>


<a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>





<h1>Many floats, No words + ClearFix</h1>
<div class="show-bg cf">
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  <div class="float-left box"></div>
  
</div>

<p>Hello I am other content</p>
<hr>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.sass

@import bourbon


// Generals

body
  padding: 80px
  +clearfix
  
hr
  margin: 50px
  clear: both
  border-color: #ccc
  
img
  vertical-align: baseline

.show-bg
  background: pink
  padding: 20px
  box-shadow: 0px 0px 0px 20px orange inset
  font-size: 0
  border: 4px solid #FF4136

.box
  +size(100px)
  background: lightblue

.box-wide
  background: lightblue
  height: 100px
  width: 100%

.sup
  font-size: 16px
  background: lightgreen
    
 
    
    
    
// Floats
 
.float-left
  float: left
  margin: 0 10px 10px 0
 
.float-right
  float: right
  margin: 0 0 10px 10px

  
  
// Clear
 
.clear
  clear: both
    
    
    
    
    
    
    
    
    
// Nicks Clearfix Hack
 
.cf
  *zoom: 1

  &:before,
  &:after
    content: " "
    display: table
  &:after
    clear: both

styles

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />