指的是一个块级渲染作用域,该区域内拥有一套完整的规则来约束块级盒子的布局,且与区域外部无关.
目前成都创新互联公司已为数千家的企业提供了网站建设、域名、虚拟空间、网站运营、企业网站设计、永德网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
当一个盒子不设置高度,当其中的子元素都浮动时,这个盒子便无法撑起自身.
这个问题可以使用BFC来解决,形成一个块级格式化上下文.
float
的值不为none
position
的值不为static
或relative
display
的值为inline-block
,flex
,inline-flex
设置overflow:hidden
取消盒子的margin
塌陷
如图所示,父元素盒子不做设置,当子盒子设置margin-top后,父元素盒子也会随之变化.
此时给父元素设置overflow:hidden
创建块级格式化上下文可以有效解决margin塌陷问题
清除浮动
如图所示,当父盒子中有元素浮动,有元素不浮动时,不浮动的元素会出现在浮动元素下方此时给浮动元素设置overflow:hidden
可以清除浮动,显示出不浮动元素.
当然清除浮动还有其他几种方法,这些后续再谈
了解更多,去我博客 Plumli看看叭
分享名称:了解前端中的BFC(块级格式化上下文)
URL标题:https://www.cdcxhl.com/article32/dsojspc.html
成都网站建设公司_创新互联,为您提供网站导航、网页设计公司、软件开发、微信公众号、用户体验、关键词优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联