Oyyxgr

index.html

<h2>Using BFC to contains float elements</h2>

<p>This can also used to clear the float (clearfix)
</p>

<p>
  Another better way is using clearfix class
</p>

<div class="container">
  <div class="box">
    <p>Sibling</p>
  </div>
  <div class="box">
    <p>Sibling</p>
  </div>
</div>

<div class="main">
  <p>Block</p>
</div>

Oyyxgr.markdown

Oyyxgr

A Pen by zqlu on CodePen.

License.

style.css

* {
  box-sizing: border-box;
}

body {
  text-align: center;
}

.container {
  background-color: green;
  overflow: hidden;
  padding: 5px;
}

.box {
  float: left;
  margin: 0 20px;
  width: calc(50% - 40px);
  background-color: lightgreen;
}

.main {
  background-color: yellow;
}