<h2>bfc解决</h2>
<div class="container bfc">
  <div class="float-el">float元素</div>
  <div class="content bfc">
    <div>content使用bfc让自己布局不跟float元素重叠</div>
    <div class="article">
      <p class="section">section1</p>
      <div class="bfc">
        <p class="section">使用bfc去除margin折叠</p>
      </div>
      <p class="section">section3</p>
    </div>
  </div>
</div>


.bfc {
  overflow: auto;
}
.container {
  background: #ccc;
  color: white;
}
.float-el {
  float: left;
  width: 120px;
  height: 200px;
  background-color: #ff9e2c;
}
.content {
  height: 300px;
  background: #4e97cd;
}

.section {
  margin: 20px 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.