zoukankan
html css js c++ java
BFC(块级格式化上下文)
BFC(块级格式化上下文):是一个独立的渲染区域,里面的内容浮动不影响区域外的元素
给元素添加以下属性可以触发BFC:
- float 属性不为none
- position 为 absolute 或 fixed
- display 为 inline-block,table-caption,fiex,inline-fiex
- overflow 不为visible
BFC布局规则特性(是一个独立的渲染区域,只有block-level box参与,规定了内部的block-level Box如何布局,并且与这个区域外部毫不相干):
- 在BFC中,盒子从顶端开始垂直地一个接一个地排列
- 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻盒子的margin会发生重叠
- 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)
对于从右到左的格式来说,则触碰到右边缘
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘
- 计算BFC的高度时,自然也会检测浮动的盒子高度
作用一:清除浮动
- float 属性不为none
- position 为 absolute 或 fixed
符合这两个属性就能触发BFC
作用二:解决外边距合并
属于同一个BFC的两个相邻盒子的margin会发生重叠,给son1一个margin-bottom: 50px
给son2一个margin-top: 100px ,他们两个的外边距会发生合并
<div class="son1"></div>
<div class="son2"></div>
这个时候用一个div包裹son1,创建不属于同一个BFC,就不会发生重叠了
<div class="over">
<div class="son1"></div>
</div>
<div class="son2"></div>
给over一个overflow: hidden 即可
案例
根据BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘
实现效果
是紧贴浮动的边缘,当左侧的盒子宽度变大,右边的盒子会自动变小,是因为 txt里面的overflow: hidden属性创建的BFC区域
BFC是一个隔离的独立区域,里面的元素不会影响到外面的元素
代码改变世界~
查看全文
相关阅读:
Atitit.js图表控件总结
atitit.attilax的软件 架构 理念.docx
Atitit.异常处理 嵌套 冗长的解决方案
Atitit.异常处理 嵌套 冗长的解决方案
Atitit.atiagent agent分销系统 代理系统 设计文档
Atitit.atiagent agent分销系统 代理系统 设计文档
Atitit ati licenseService 设计原理
Atitit ati licenseService 设计原理
Atitit.项目修改补丁打包工具 使用说明
Atitit.项目修改补丁打包工具 使用说明
原文地址:https://www.cnblogs.com/hxiaoman/p/14876529.html
最新文章
Atitit.ide技术原理与实践attilax总结
Atitit.ide技术原理与实践attilax总结
Atitit 面向对象编程(OOP)、面向组件编程(COP)、面向方面编程(AOP)和面向服务编程(SOP)的区别和联系
Atitit 面向对象编程(OOP)、面向组件编程(COP)、面向方面编程(AOP)和面向服务编程(SOP)的区别和联系
Atitit. 构造ast 语法树的总结attilax oao 1. Ast结构树形12. ast view (自是个160k的jar )22.1. 多条语句ast结构22.2. 变量定义 int b,c; 的ast结构22.3. 方法调用meth1(a=1,b=2,c=3); 的ast结构23. 误解的问题33.1. 语法书子能是个二叉树,实际上多叉树越好..33.2. 非要不个ast放到个s
Atitit. 构造ast 语法树的总结attilax v2 q0f
Atitit.基于dsl的methodinvoker
Atitit.基于dsl的methodinvoker
Atitit.attilax软件研发与项目管理之道
Atitit.attilax软件研发与项目管理之道
热门文章
Atitit利用反射获取子类 集合 以及继承树
Atitit利用反射获取子类 集合 以及继承树
Atitit.词法分析的原理 理论
Atitit.词法分析的原理 理论
Atitit org.eclipse.jdt 的ast 架构 Eclipse JDT API spec
Atitit org.eclipse.jdt 的ast 架构 Eclipse JDT API spec
Atitit。如何实现dip, di ,ioc ,Service Locator的区别于联系
Atitit。如何实现dip, di ,ioc ,Service Locator的区别于联系
Atitit.js图表控件总结
atitit.attilax的软件 架构 理念.docx
Copyright © 2011-2022 走看看