1 .BFC的含义 :
Block Formatting Contexts(BFC) 块级元素格式化上下文
它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系
块级元素:父级(是一个块元素)
内容:子元素(是一个块元素)
其他元素:与内容同级别的兄弟元素
相互作用:BFC里的元素与外面的元素不会发生影响
2.触发条件 :
触发BFC的方式(一下任意一条就可以)
1.float的值不为none
2.overflow的值不为visible
3.display的值为table-cell、tabble-caption和inline-block之一
4.position的值不为static或则releative中的任何一个
3.FBC布局与普通文档流布局区别
普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠
BFC布局规则
1.浮动的元素会被父级计算高度(父级触发了BFC)
2.非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC)
3.margin不会传递给父级(父级触发了BFC)
4.两个相邻元素上下margin会重叠(给其中一个元素增加一个父级,然后让他的父级触发BFC)
<divstyle="border:1px solid #f00;overflow:hidden; ">
<divstyle="width:100px; height:100px; background:green;float:left;">kaivon</div>
</div>
<divstyle="border:1px solid #f00;margin-top:100px; ">
<divstyle="width:100px; height:100px;background:green;float:left;">kaivon1</div>
<divstyle="width:100px; height:100px;background:red;overflow:hidden;">kaivon2</div>
</div>
<divstyle="background:blue;margin-top:100px;overflow:hidden;">
<divstyle="width:100px; height:100px; background:green; margin-top:100px;">kaivon1</div>
<divstyle="width:100px; height:100px; background:red;">kaivon2</div>
</div>
<divstyle="margin-top:100px; border:1px solid red;">
<divstyle="width:100px; height:100px; background:green;margin:100px0;">kaivon1</div>
<divstyle="overflow:hidden;">
<divstyle="width:100px; height:100px; background:red;margin:100px0;">kaivon2</div>
</div>
</div>
- 推荐文章
- (转)DockPanel的一点点改进
- 事务四大特征:原子性,一致性,隔离性和持久性(ACID)
- PHP上传进度支持(Upload progress in sessions)
- 深入理解PHP原理之Opcodes
- laravel里的队列学习
- UI 小白设计常用的Website
- 【代理】内网穿透工具 frp&frps
- 讨论session共享方案设计
- 如何快速修改/替换GIF的背景?
- 了解Nginx与PHP的交互?
- 前端Javascript效果汇总
- mysql 数据类型
- mysql 浮点数与定点数
- mysql TEXT与BLOB 碎片整理
- mysql char与varchar区别
- mysql 选择合适的存储引擎
- mysql 创建表和外键
- centos 7 安装mysql
- mysql 查看修改存储引擎
- mysql 查看帮助
- redis集群搭建
- redis状态查看
- redis动态修改参数配置
- redis的info
- redis安装配置
- redis命令总结
- rabbitmq安装
- 怎么把U盘启动改为硬盘启动(适用于U盘安装系统时)
- 监控宝篇之一(快速入门)
- raid详解