一天搞定CSS:BFC布局与普通文档流布局比较--15
来源:互联网 发布:淘宝信用卡网银支付 编辑:程序博客网 时间:2024/06/07 16:33
BFC:Block Formatting Contexts–块级元素格式化上下文
1.BFC定义
它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用
关键词解释:
块级元素:父级(是一个块元素)内容:子元素(是一个块元素)
其它元素:与内容同级别的兄弟元素
相互作用:BFC里的元素与外面的元素不会发生影响
2.BFC触发方式
2.BFC的布局规则
3.普通文档流布局规则
4.代码演示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 触发BFC的方式(以下任意一条就可以) 1、float的值不为none 2、overflow的值不为visible 3、display的值为table-cell、table-caption和inline-block之一 4、position的值不为static或者releative中任何一个 普通文档流的布局规则 1、浮动的元素是不会被父级计算高度 2、非浮动元素会覆盖浮动元素的位置 3、margin会传递给父级 4、两个相邻的元素上下margin会重叠 BFC的布局规则 1、浮动的元素会被父级计算高度(父级触发了BFC) 2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) 3、margin不会传递给父级(父级触发了BFC) 4、两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级,然后让他的父级触发了BFC) --> <!-- 1、浮动的元素会被父级计算高度(父级触发了BFC) 使用display不为none触发BFC --> <div style="border: 1px solid #f00; display: inline-block;"> <div style="width: 100px; height: 100px; background: green; float: left;">div1----</div> </div> <!-- 2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) 使用overflow不为visible触发BFC --> <div style="border: 1px solid #f00; margin-top: 100px;"> <div style="width: 100px; height: 100px; background: green; float: left;">kaivon1</div> <div style="width: 100px; height: 100px; background: red; overflow: hidden;">kaivon2</div> </div> <!-- 3、margin不会传递给父级(父级触发了BFC) 使用overflow不为visible触发BFC --> <div style="background: blue; margin-top: 100px; overflow: hidden;"> <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">kaivon1</div> <div style="width: 100px; height: 100px; background: red;">kaivon2</div> </div> <!-- 4、两个相邻的元素上下margin不会重叠(给其中一个元素添加一个单独的父级,然后让他的父级触发了BFC) 使用overflow不为visible触发BFC --> <div style="margin-top: 100px;"> <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">kaivon1</div> <div style="overflow: hidden;"> <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">kaivon2</div> </div> </div> </body></html>
效果图:
5.对于IE不支持BFC问题的处理,Layout布局
链接地址:http://blog.csdn.net/baidu_37107022/article/details/71640304
0 0
- 一天搞定CSS:BFC布局与普通文档流布局比较--15
- css布局——文档流布局、浮动布局
- CSS布局之BFC
- css 布局中的 BFC
- 关于普通流布局
- 一天搞定CSS:支持IE的Layout布局--16
- CSS布局——BFC
- css浮动与BFC
- CSS浮动与BFC
- 一天搞定CSS: 浮动(float)及文档流--10
- 流布局与自己布局和系统布局
- css定位流布局
- css之bfc与haslayout
- 一天搞定CSS: overflow--14
- 自定义标签布局(流布局)
- 一天搞定CSS:初识css--01
- 一天搞定CSS:css选择器--07
- 一天搞定CSS: CSS选择器优先级--08
- java-File、字节流、字符流
- Valid Anagram
- Spring注入Properties文件中的配置
- DT科技评论第37期:Cato_Network将会重新定义下一代网络以及安全
- DM9000网卡移植
- 一天搞定CSS:BFC布局与普通文档流布局比较--15
- list集合的各种输出方法
- MyFlag Step3:APP的系统设计、界面设计和初步详细设计
- java 集合类结构分析
- JS 实现上传(导入)excle 文件方法
- 图像卷积与滤波的一些知识点
- 事件的学习和利用
- 延迟加载解决offset过大导致的分页性能问题
- CSDN博客积分规则和获取积分方法