目录
使用BFC解决在多列布局宽度超出盒子总宽度最后一个盒子会掉下去的问题
BFC叫格式化上下文。
我个人认为想要了解这个概念,先了解这个bfc可以解决什么问题?
-
使用BFC来防止外边距折叠
由下面的图我们可以看出,正常情况下,apple 和 banana 应该有 40px的距离,因为apple 有下边距20px + banana上边距20px = 40px,然而实际中浏览器显示的只有20px。这就是所谓的哇编剧折叠的问题。两个外边距相聚在一起的时候,以最大的外边距作为最终的两个盒子之间的距离。如果apple下边距是40px,banana上边距是20px,则他们之间的显示距离就为40px。
那么怎么解决这个问题呢?
为了更加清楚表达,我们做个对比,再添加一个div盒子orange。显示也是一样根banana盒子也存在外边距折叠的问题。现在给orange外围包裹一个盒子,
然后在css中
那么这样的结果就接触了这种外边距折叠的问题
这里的orange的包裹的div加了一个overflow:hidden; 触发了bfc。从而避免了外边距折叠的这种情况。
-
使用BFC来包含浮动
先看一个例子
现在给container里面的div盒子左浮动
我们会发现增加了左浮动之后,container盒子的高度出现了坍陷,高度变为了0,为了避免这个问题,我们可以给父盒子container加上一个overflow:hidden ; 即可解决这个问题
-
使用BFC来防止文字环绕
有时候一个浮动div
周围的文字环绕着它(如下图中的左图所示)但是在某些案例中这并不是可取的,我们想要的是外观跟下图中的右图一样的。为了解决这个问题,我们可能使用外边距,但是我们也可以使用一个BFC来解决。
我们可以看出正常放置的内容会环绕在盒子四周,现在我们想要的结果是让内容值浮动与 浮动盒子的右侧。那么我们可以给p标签添加一个属性即可,overflow:hidden;
-
使用BFC解决在多列布局宽度超出盒子总宽度最后一个盒子会掉下去的问题
解决办法:给最后一个盒子加 overflow:hidden;