BFC的布局规则和触发条件
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
BFC的布局规则和触发条件的更多相关文章
- BFC的布局规则以及触发条件
1 .BFC的含义 : Block Formatting Contexts(BFC) 块级元 ...
- hasLayout与BFC的触发条件
hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两 ...
- BFC概念和作用,触发条件
1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...
- Nginx 502错误触发条件与解决办法汇总(转载)
一些运行在Nginx上的网站有时候会出现“502 Bad Gateway”错误,有些时候甚至频繁的出现.有些站长是在刚刚转移到Nginx之后就出现了这个问题,所以经常会怀疑这是不是Nginx的问题,但 ...
- 10、网页制作Dreamweaver(扩展:各浏览器对 onunload 事件的支持与触发条件实现有差异)
标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...
- Oracle DBWR,LGWR,CKPT,ARCH 触发条件 总结
一. DBWR写磁盘数据触发条件 1. 当进程在辅助LRU链表和主LRU链表上扫描以查找可以覆盖的buffer header[空闲缓冲区]时,如果已经扫描的buffer header的数量到达一定的 ...
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...
- unity collider 和 trigger 触发条件
物体A,物体B(都含有collider组件) collider触发条件:A和B至少一方是 未勾选is Kinematic的rigidbody,且都未勾选 is trigger.当只有一方是rigid ...
- Major GC和Full GC的区别是什么?触发条件呢?
作者:RednaxelaFX链接:http://www.zhihu.com/question/41922036/answer/93079526来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...
随机推荐
- idea报错。Error:Failed to load project configuration: cannot parse xml file E:\project\.idea\workspace.xml: Error on line 1: 前言中不允许有内容。
因为电脑卡死强制重启电脑后打开idea,进行junit单元测试报错: idea报错.Error:Failed to load project configuration: cannot parse x ...
- 基于JavaSwing的例子-非连接数据库
项目结构: Constant.java package com.mstf.test; import java.io.Serializable; public class Constant implem ...
- 关于概率算法的问题,不知道逻辑错在哪里,求debug
做个骰子成功几率的分析,投n颗骰子,第一次投成功的几率是a,然后投成功的骰子,需要再投1次,这次成功的几率是b.第二次成功的骰子才算最终成功. 要分析出n颗骰子,最终成功0到n颗的概率. 我写了个算法 ...
- Python3基础笔记---re模块
参考博客: Py西游攻关之模块 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列 ...
- centos6.9安装virtualenv并配置python2.7环境
一. 安装python2.7 解压文件 tar -xvf Python-2.7.14.tar 进入源码包目录 cd Python-2.7.14 开始构建之前指定安装的目录 默认会被安装进 /usr/l ...
- Object-C,四则运算计算器
下面是是一个比较复杂的类. 定义一个四则运算计算器Caculator的接口和实现. 在main函数中,让用户输入四则运算表达式,比如a+b,a-b. 最后,在控制台输出结果. 用到的语法:接口.类的定 ...
- oracle基础入门(四)
一:其实oracle的语法跟sql servce 挺像的只有一些个别的差异而已 1):安装Oracle的数据库一般它的表中会自带了两站表: 是 emp(员工表) , dept(部门) 单表查询 sel ...
- C# Expression 树转化为SQL与语句(二)--解决参数问题
在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...
- Liquibase简介(1)
Liquibase是一个用于跟踪.管理和应用数据库变化的开源的数据库重构工具.它将所有数据库的变化(包括结构和数据)都保存在XML文件中,便于版本控制. Liquibase具备如下特性: * 不依赖于 ...
- linux(debian/ubuntu)下连接安卓手机--小米4为例
更改:如今小米连接Ubuntu等Linux系统,直接改动手机上的连接方式就可以. --------------------------------------------- 因为安卓手机底层就是lin ...