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>
发现eclipse红叉,查看markers发现Target runtime Apache Tomcat 6.0 is not defined
The required Server component failed to start so Tomcat is unable to start问题解决
Spring官网下载dist.zip的几种方法
SPRING---------配置文件的命名空间
eclipse中egit插件使用
eclipse不自动弹出提示(alt+/快捷键失效)
使用jenkins配置.net mvc网站进行持续集成
windows系统的便签
Linq to Entity 动态拼接查询条件(重点是OR)
- 最新文章
-
多目标优化非支配关系实现
使用origin画SCI论文图
word封面背景及水印背景
在excel图表上添加数据标签
修改excel图表中的“系列一”
生成有目录的pdf
文件名过长导致不能提交到缓存区或同步到本地
PDF截取矢量图
S折交叉验证(S-fold cross validation)
DNA序列编码中Hairpin的定义和计算
- 热门文章
-
UnicodeDecodeError gbk codec can't decode byte in position illegal multibyte sequence
欧拉图和哈密顿图
python操作txt文件中数据教程[4]-python去掉txt文件行尾换行
使用Arraylist将数组中元素随机均等乱序分为N个子数组
Spring MVC报错:The request sent by the client was syntactically incorrect ()
详解SQLServer如何链接远程MySQL数据库
各种主流 SQLServer 迁移到 MySQL 工具对比
EF + MySql 错误:配置错误 无法识别的元素“providers”
vs2015配置mysql数据库时,mysql.data、mysql.data.entity、EntityFramework的安装错误问题
VS2015 + EF6连接MYSQL