<h2>Floated: plenty of text</h2>

<div class="outer">
  <div class="float">I am a floated element.</div>
  I am text inside the outer box. If there is enough text then the text will wrap around the floated element. The border on the outer will then wrap around the text.
</div>

<h2>Floated: not enough text</h2>

<div class="outer">
  <div class="float">I am a floated element.</div>
  I am text inside the outer box. 
</div>

<h2>Floated: with a BFC</h2>

<div class="outer overflow">
  <div class="float">I am a floated element.</div>
  The outer has overflow: auto.
</div>

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
  font: 1.4em Arial, sans-serif;
}

.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

.overflow {
  overflow: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.