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>
dev 从表处理
core直接获取报异常数据
SQL根据指定节点ID获取所有父级节点和子级节点(转载)
bootstrap的tree使用
ef报错(因为相同类型的其他实体已具有相同的主键值)
yii初体验(2)创建方法
yii初体验(1)composer安装+环境检测
layui数据表格中图片无法自适应问题
tp5查询数据库排除某字段
- 最新文章
-
PowerShell工具脚本---按行数切割大文本文件
我发明了妙极图片验证码
powershell小工具,efs加解密三剑客。
C#Lambda小栗子(查询DataTable中数据行)
Sql Server 使用游标辅助循环
通俗易懂的join、left join、right join、full join、cross join
关键字ref、out
String.Join函数
[置顶] xamarin android自定义spinner
[置顶] 几行代码实现ofo首页小黄人眼睛加速感应转动
- 热门文章
-
[置顶] xamarin android使用gps定位获取经纬度
[置顶] xamarin android使用zxing扫描二维码
[置顶] xamarin android 布局尺寸了解
[置顶] webapi token、参数签名是如何生成的
[置顶] xamarin android toolbar(踩坑完全入门详解)
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
[置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏
[置顶] xamarin android Fragment实现底部导航栏
ASP.NET_正则表达式_匹配HTML中的一行或多行
修改源码去除zblog博客分类目录的RSS图标