原文：什么是BFC，及其应用 - 每天一个JavaScript小知识@Js中文网 · 码农进阶题库

原文地址：https://www.javascriptc.com/interview-tips/zh_cn/more/intro-bfc-effect/

题目描述：

介绍下 BFC 及其应用

BFC即 脱离文档流

解题：

  • 思路一： BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响

1.html 根元素 2.float 浮动 3.绝对定位 4.overflow 不为 visiable 5.display 为表格布局或者弹性布局

BFC 主要的作用是：

1.清除浮动 2.防止同一 BFC 容器中的相邻元素间的外边距重叠问题

  • 思路二：

BFC特性：

1.内部box会在垂直方向，一个接一个地放置。 2.Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘） 4.形成了BFC的区域不会与float box重叠 5.计算BFC高度时，浮动元素也参与计算

BFC作用：

1.利用特性4可实现左图右文之类的效果：

<img src='image.png'>
<p>我是超长的文字<p>

img {
    float:left
}
p {
    overflow:hidden
}

2.利用特性5可以解决浮动元素造成的父元素高度塌陷问题：

<div class='parent'>
    <div class='float'>浮动元素</div>
</div>

.parent {
    overflow:hidden;
}
.float {
    float:left;
}

更多内容