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>
华为方舟编译器开源官网正式上线
PyTorch官方教程中文版
《一张图看懂华为云BigData Pro鲲鹏大数据解决方案》
区块链学习笔记:DAY05 如何使用公有云区块链服务
python一行写不下,变多行
python 多窗口编辑
ant的设置properties
java的输出类
python的IndentationError: unexpected indent python
- 最新文章
-
14.5.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量
14.5.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量
14.5.1 Resizing the InnoDB System Tablespace
14.5.1 Resizing the InnoDB System Tablespace
14.4.9 Configuring Spin Lock Polling 配置Spin lock 轮询:
MyBatis学习总结(9)——使用MyBatis Generator自动创建代码
MyBatis学习总结(9)——使用MyBatis Generator自动创建代码
[置顶] Java Web学习总结(24)——SSM(Spring+SpringMVC+MyBatis)框架快速整合入门教程
[置顶] Java Web学习总结(24)——SSM(Spring+SpringMVC+MyBatis)框架快速整合入门教程
[置顶] Java Web学习总结(24)——SSM(Spring+SpringMVC+MyBatis)框架快速整合入门教程