分类
默认

BFC 理解与应用

BFC:一块独立渲染的区域,内部元素的渲染不会影响边界以外的元素。

形成BFC的常见条件:

  • float 不是none
  • position 是 absolute 或 fixed
  • overflow 不是 visible
  • display 是 flex inline-block 等

使用BFC清除浮动

<!-- 清除浮动 -->
<style type="text/css">
    .container {
        background-color: #f1f1f1;
    }
    .left {
        float: left;
    }
    .bfc {
        overflow: hidden; /* 触发元素 BFC */
    }
</style>
<div class="container bfc">
    <img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;"/>
    <p class="bfc">某一段文字……</p>
</div>