什么是BFC

块格式化上下文(block formatting context):我们无法去定义BFC到底是什么,就如同我们无法定义堆叠上下文一样,但当我们看到一种形式就能知道它是不是BFC,一个BFC有以下两个功能。

面试的时候不要解释BFC是什么,描述他的两个功能并举例!!

一、用BFC可以包住它内部的浮动元素

html:

<body>
<div class="baba">
  <div class="erzi">
  </div>
</div>
</body>

css:

.baba{
  border: 10px solid red;
  min-height: 10px;
  display: flow-root; /*触发BFC*/     //还可以使用float:left; position:absolute; display:inline-block; overflow:auto/hidden;  
}
.erzi{
  background: green;
  float:left;
  width: 300px;
  height: 100px;
}

输出效果:


二、用 float + div 做左右自适应布局

html:

<body>
  <div class="gege">gege</div>
  <div class="didi">didi</div>
</body>

css:

.gege{
  width: 400px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 400px;
  border: 5px solid green;
  display: flow-root;  /*触发BFC*/
}

输出效果:




阅读更多
上一篇堆叠上下文
下一篇ES6--函数与对象,新字符串
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭