Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.bfc {
  border: 1px solid red;
  overflow: hidden;
}

/* 在 bfc 中块级元素左边和容器的左边对齐，因此 main 的左边
   也是和 .bfc 的左边对齐的。
   如果这时，再将 .right 变成一个 bfc 则，其不会与 浮动元素    重叠。
*/
.left {
  height: 150px;
  width: 50px;
  background: #ddd;
  float: left;
}

.right {
  height: 200px;
  background: #999;
  overflow: hidden;
}

.bfc2 {
  margin-top: 20px;
  border: 1px solid blue;
  width: 300px;
  /* 这里设置了 bfc 之后, 由于 bfc 内部的浮动元素也会参与高      度计算，因此起到了清除浮动的效果*/
  overflow: hidden;
}

.bfc2 .ch {
  border: 5px solid #f66;
  width: 100px;
  height: 100px;
  float: left;
}

.bfc3 {
  margin-top: 20px;
  border: 1px solid #333;
}

/* 同一个 bfc 中相邻的 margin 会重叠*/
.bfc3 .ch3 {
  color: #f55;
  background: #fcc;
  width: 200px;
  line-height: 100px;
  text-align:center;
  margin: 10px;
}

.wrap {
  overflow: hidden;
}
</style>
</head>
<body>

  <div class="bfc">
    <div class="left"></div>
    <div class="right">right</div>
  </div>

  <div class="bfc2">
    <div class="ch"></div>
    <div class="ch"></div>
  </div>

  <div class="bfc3">
    <div class="ch3">ah</div>
    <!-- 注意：这里要在外面新加一个容器，而不是直接设置 -->
    <div class="wrap">
      <div class="ch3">oo</div>
    </div>
  </div>


<script id="jsbin-source-css" type="text/css">.bfc {
  border: 1px solid red;
  overflow: hidden;
}

/* 在 bfc 中块级元素左边和容器的左边对齐，因此 main 的左边
   也是和 .bfc 的左边对齐的。
   如果这时，再将 .right 变成一个 bfc 则，其不会与 浮动元素    重叠。
*/
.left {
  height: 150px;
  width: 50px;
  background: #ddd;
  float: left;
}

.right {
  height: 200px;
  background: #999;
  overflow: hidden;
}

.bfc2 {
  margin-top: 20px;
  border: 1px solid blue;
  width: 300px;
  /* 这里设置了 bfc 之后, 由于 bfc 内部的浮动元素也会参与高      度计算，因此起到了清除浮动的效果*/
  overflow: hidden;
}

.bfc2 .ch {
  border: 5px solid #f66;
  width: 100px;
  height: 100px;
  float: left;
}

.bfc3 {
  margin-top: 20px;
  border: 1px solid #333;
}

/* 同一个 bfc 中相邻的 margin 会重叠*/
.bfc3 .ch3 {
  color: #f55;
  background: #fcc;
  width: 200px;
  line-height: 100px;
  text-align:center;
  margin: 10px;
}

.wrap {
  overflow: hidden;
}
</script>
</body>
</html>