关于BFC不会被浮动元素遮盖的一些解释
时间:2022-05-04
本文章向大家介绍关于BFC不会被浮动元素遮盖的一些解释,主要内容包括简介、例证、使用、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
简介
在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为。规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实,浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。
例证
创建两个浮动元素和一个BFC,然后改变BFC的margin值和浮动元素的margin值,观察它们的位置。
.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;
}
可见BFC的border-box不会覆盖浮动元素。
为了进一步验证BFC的border-box不会覆盖浮动元素的margin-box,我们设置.f1的margin-right:30px;
这样就可明显看出BFC具体影响这两个元素的哪种盒模型的覆盖。
另外,如果设置.bfc的宽度值过大(两个浮动元素的水平分量与bfc的水平分量之和大于包含块的宽度),那么.bfc会向下放置知道有足够空间容纳为止。
使用
那么这个技巧对我们有什么用处呢?近日在BFC下多栏自适应布局 一文中见识到了BFC不会被浮动元素覆盖的用处。对于一个浮动侧边栏,我们可以触发右边栏的BFC,这样右边栏就不会被浮动侧边栏所覆盖,但是如何设置两栏之间的间隔呢?上文已经提到了,我们可以设置右边栏的padding-left值,也可以设置浮动左边栏的margin-right值,通过这两种方法来设置间距,完成宽度自适应布局。
- React Native 持续部署实践— push 代码构建出新版的 Growth
- 技巧 - 如何好一个 Git 提交信息及几种不同的规范
- React、Vue、Ember 及其他前端开发者,请暂缓更新到 Chrome 59 浏览器
- 微软开源全新的文档生成工具DocFX
- 使用 MimeKit 和 MailKit 发送邮件
- 使用 React Native 重写大型 Ionic 应用后,我们想分享一下这八个经验
- 基于OWin的Web服务器Katana发布版本3
- 【工具推荐】图像界的魔术师 ImageMagick
- 使用Metrics.NET 构建 ASP.NET MVC 应用程序的性能指标
- 如何设计完善的构建系统,为日常开发提速一倍
- 两年 100 期技术周报后,我收获了这四点
- 如何为技术博客设计一个推荐系统(中):基于 Google 搜索的半自动推荐
- 我是如何为技术博客设计一个推荐系统(上):统计与评分加权
- c#处理空白字符
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法