Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div class="wrapper">

<h1>Clearfix vs. different BFC-establiishing techniques</h1>

  <p>In all examples there is a yellowish floating box <em>before</em> the block in question (with blue outline), blue square floating box <em>inside</em> it, the blue triangle in the right is the example of overflowing content. Nested &lt;p&gt; element's margins are highlighted with pink. If you hover the yellowish floating box, you'll see what happens if the box had some extra wide content like the big image or table.</p>

<h2>0. Simply a block (for reference)</h2>

<div class="outer-float"></div>

<div class="container">
  <div class="item"></div>
  <p>Just a block</p>
</div>
  
 <p>All floats, external or internal, cross its borders. The block contains only non-floating content (text), margins of its children collapse through them, too.</p>
  
<h2>1. The block with clearfix (no BFC)</h2>

<div class="outer-float"></div>

<div class="container clearfix">
  <div class="item"></div>
  <p>A "clearfixed" block</p>
</div>
  
<p>The clearing pseudo-element cleared not only the inner float, but also the previous one. And the child's margins still collapse through the block borders.</p>

<h2>2. Display: flow-root (standard way to establish the BFC)</h2>

<div class="outer-float"></div>

<div class="container container4">
  <div class="item"></div>
  <p>A block with display: flow-root (Fx 53+, Chrome Canary 57+).</p>
</div>

<h2>3. A special case: &lt;fieldset&gt;</h2>

<div class="outer-float"></div>

<fieldset class="container container4">
  <div class="item"></div>
  <p>&lt;fieldset&gt; always creates BFC.</p>
</fieldset>

<p>But it does this more like display:table (see below), than like display:flow-root.</p>

<h2>4. The overflow hack</h2>

<div class="outer-float"></div>

<div class="container container3">
  <div class="item"></div>
  <p>A block with overflow: hidden</p>
</div>

<hr class="clear">

<div class="outer-float"></div>

<div class="container container3">
  <div class="item"></div>
  <p>A block with overflow: auto</p>
</div>

<h2>5. The display: table hack</h2>

<div class="outer-float"></div>

<div class="container container5">
  <div class="item"></div>
  <p>A block with display:table and much text inside. Really enough much text inside.</p>
</div>

<hr class="clear">

<div class="outer-float"></div>

<div class="container container5">
  <div class="item"></div>
  <p>And with little text.</p>
</div>
  
<h2>6. The display: table-cell hack</h2>

<div class="outer-float"></div>

<div class="container container6">
  <div class="item"></div>
  <p>A block with display:table-cell and much text inside. Really enough much text inside.</p>
</div>

<hr class="clear">

<div class="outer-float"></div>

<div class="container container6">
  <div class="item"></div>
  <p>And with little text.</p>
</div>
  
<h2>7. The display: inline-block hack</h2>

<div class="outer-float"></div>

<div class="container container7">
  <div class="item"></div>
  <p>A block with display:inline-block and much text inside. Really enough much text inside.</p>
</div>

<hr class="clear">

<div class="outer-float"></div>

<div class="container container7">
  <div class="item"></div>
  <p>And with little text.</p>
</div>

Remember that inline-blocks live in the <em>inline formatting context,</em> so whitespace characters around them count as text and the parent line-height can have surprising effects on them!

<h2>8. The float hack</h2>

<div class="outer-float"></div>

<div class="container container8">
  <div class="item"></div>
  <p>Floating box with much text inside. Really enough much text inside.</p>
</div>

<hr class="clear">

<div class="outer-float"></div>

<div class="container container8">
  <div class="item"></div>
  <p>And with little text.</p>
</div>

Floats themselves establich the new BFC. But overusing them can lead to almost unpredictable behavior!

<h2>9. The column hack</h2>

<div class="outer-float"></div>

<div class="container container9">
  <div class="item"></div>
  <p>A block with column-count: 1.</p>
</div>

<h2>10. The containment hack</h2>

<div class="outer-float"></div>

<div class="container container10">
  <div class="item"></div>
  <p>A block with contain: layout;</p>
</div>

<p>Also kind of standard solution. Works in Chrome 52+.</p>
</div>
            
          
!

CSS

            
              .clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.container3 {
  overflow: hidden;
}
.container3 ~ .container3 {
  overflow: auto;
} 

.container4 {
  display: flow-root;
}

.container5 {
  display: table;
}

.container6 {
  display: table-cell;
}

.container7 {
  display: inline-block;
}

.container8 {
  float: left;
}

.container9 {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.container10 {
  contain: layout;
}

.container {
  box-shadow: 0 0 0 2px #3bc9db;
  border-radius: 5px;
  background-color: #e3fafc;
  padding: 0 5px;
}

.container::before {
  content: '';
  float: right;
  border-style: solid;
  border-color: transparent #1098ad;
  border-width: 2em 0 2em 4em;
  margin: 1em -3em 0 0;
  opacity: .7;
}

.item {
  height: 100px;
  width: 100px;
  background-color: #1098ad;
  border: 1px solid #0b7285;
  border-radius: 5px;
  float: left;
  opacity: .7
}

h2 {
  padding: 1em 0 .5em 0;
  margin: 0;
  clear: both;
}

body {
  font: 18px Helvetica, sans-serif;
  background: #eee;
}

.wrapper {
  max-width: 500px;
  margin: 40px auto;
  padding: 5px;
  background: #fff;
}

.outer-float {
  height: 150px;
  width: 50px;
  background-color: #98ad10;
  border: 1px solid #72850b;
  border-radius: 5px;
  float: left;
  margin-right: 5px;
  opacity: .6
}

.container p {
  margin: 1em 0;
  box-shadow: 0 -1em 0 0 rgba(255,0,0,.15), 0 1em 0 0 rgba(255,0,0,.15);
  border-radius: 5px;
}
.container p::after {
  content: ' Example of the wide image or table in the block ';
  display: inline-block;
  background: #dddd33;
  padding: 0;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: width .4s;
}
:hover + .container p::after {
  width: 650px;
}

fieldset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}
hr {
  visibility: hidden;
}
.clear {
  clear: both;
}

.chromefix::before {
  will-change: opacity;
  /* так тоже работает:
  backface-visibility: hidden; */
}
            
          
!

JS

            
              
            
          
!
999px

Console