了解前端中的BFC(块级格式化上下文)-成都快上网建站

了解前端中的BFC(块级格式化上下文)

BFC(块级格式化上下文)

什么是BFC

指的是一个块级渲染作用域,该区域内拥有一套完整的规则来约束块级盒子的布局,且与区域外部无关.

目前成都创新互联公司已为数千家的企业提供了网站建设、域名、虚拟空间、网站运营、企业网站设计、永德网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

为什么要使用BFC

当一个盒子不设置高度,当其中的子元素都浮动时,这个盒子便无法撑起自身.

这个问题可以使用BFC来解决,形成一个块级格式化上下文.

那么如何创建BFC

  • float的值不为none

  • position的值不为staticrelative

  • display的值为inline-block,flex,inline-flex

  • 设置overflow:hidden

BFC的其他作用

  • 取消盒子的margin塌陷

    如图所示,父元素盒子不做设置,当子盒子设置margin-top后,父元素盒子也会随之变化.

    此时给父元素设置overflow:hidden创建块级格式化上下文可以有效解决margin塌陷问题

  • 清除浮动

如图所示,当父盒子中有元素浮动,有元素不浮动时,不浮动的元素会出现在浮动元素下方此时给浮动元素设置overflow:hidden可以清除浮动,显示出不浮动元素.

当然清除浮动还有其他几种方法,这些后续再谈
了解更多,去我博客 Plumli看看叭


标题名称:了解前端中的BFC(块级格式化上下文)
转载注明:http://kswjz.com/article/dsojspc.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流