BFC

BFC实例

by jizhen tan

HTML

<div class="up">我在上面</div>
<div class="down">我在下面</div>
<div class="parent">
  <div class="child">我是儿子</div>
</div>
<div class="aside">我是侧边栏</div>
<div class="main">我是主要内容</div>

CSS

.up {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 100px;
}
.down {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 100px;
  display: inline-block; //触发BFC
}
.parent {
  width: 100px;
  height: 200px;
  background: red;
  margin-left: 100px;
  overflow: hidden;//触发父元素BFC，取消上外边距合并
}
.child {
  width: 50px;
  height: 50px;
  margin-top: 100px;
  border: 1px solid blue;
}
.aside {
  width: 100px;
  height: 200px;
  background: red;
  float: left;
}
.main {
  height: 250px;
  background: blue;
  overflow: hidden;//触发BFC，BFC的区域不会与float box叠加
}