前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于BFC不会被浮动元素遮盖的一些解释

关于BFC不会被浮动元素遮盖的一些解释

作者头像
欲休
发布2018-03-15 15:09:38
1K0
发布2018-03-15 15:09:38
举报
文章被收录于专栏:前端杂货铺

简介

清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为。规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实,浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。

例证

  创建两个浮动元素和一个BFC,然后改变BFC的margin值和浮动元素的margin值,观察它们的位置。

代码语言:javascript
复制
.f1r { 
background: skyBlue; 
float: left; 
width: 200px; 
}
.f2 { 
background: yellow; 
float: right; 
width: 200px; 
}
..bfc { 
background: pink; 
overflow: hidden; 
zoom: 1; 
border: 5px solid teal; 
}
图像 1
图像 1

可见BFC的border-box不会覆盖浮动元素。

为了进一步验证BFC的border-box不会覆盖浮动元素的margin-box,我们设置.f1的margin-right:30px;

图像 2
图像 2

这样就可明显看出BFC具体影响这两个元素的哪种盒模型的覆盖。

另外,如果设置.bfc的宽度值过大(两个浮动元素的水平分量与bfc的水平分量之和大于包含块的宽度),那么.bfc会向下放置知道有足够空间容纳为止。

使用

      那么这个技巧对我们有什么用处呢?近日在BFC下多栏自适应布局 一文中见识到了BFC不会被浮动元素覆盖的用处。对于一个浮动侧边栏,我们可以触发右边栏的BFC,这样右边栏就不会被浮动侧边栏所覆盖,但是如何设置两栏之间的间隔呢?上文已经提到了,我们可以设置右边栏的padding-left值,也可以设置浮动左边栏的margin-right值,通过这两种方法来设置间距,完成宽度自适应布局。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • 例证
  • 使用
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档