如何快速理解BFC

时间:2021-2-20 作者:admin

本篇将从以下四个方向解释BFC

  1. BFC是什么

  2. 为什么会有BFC

  3. 如何触发BFC

  4. BFC可以解决什么问题

1、BFC是什么

BFC(Block formatting context)直译为”块级格式化上下文”。

2、为什么会有BFC

在我们进行对页面布局时,经常会遇到一些烦人的问题。

比如当我们想完成如下布局时,此时没有给父元素固定高度,给子元素设置了右浮动。id1_1此时脱离了文档流。这时我们就需要BFC了。

3、BFC如何触发

  1. float不为none
  2. position不为relative和static
  3. overflow为auto、scroll和hidden
  4. display的值为table-cell或inline-block

4、BFC能解决什么问题

1、解决浮动元素令父元素高度坍塌的问题

  给父元素overflow:hidden触发BFC即可

2、避免外边距(margin)重叠

  给两个元素或其中一个触发BFC

3、阻止元素被浮动元素覆盖

  给不想被覆盖的元素添加overflow:hidden触发BFC

5、总结

  简单来说可以把BFC看作元素的一种属性,当元素拥有了BFC这个属性时这个元素就可以看作是独立了的独立容器,容器里面的元素不会在布局上影响到外面的元素。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。