一、 BFC的概念

BFC——block formating context的缩写，中文译为"块级格式化上下文"

二、如何触发BFC

1.设置float除none以外的值(left,right)

2.设置overflow除visible以外的值(hidden,auto,scroll)

3.设置display属性(table,table-cell,inline-block,flex)

4.设置position属性(fixed,absolute)

三、BFC的作用

1.可以解决上下margin重叠问题

可以给其中一个元素在外层嵌套一个父容器，并设置overflow:hidden;这样为里面的元素创建了一个块级格式化上下文

2.可以解决高度塌陷问题

父元素高度自适应，子元素浮动脱离文档流，不占据父元素空间，导致父元素高度为0，此时给父元素设置overflow:hidden,闭合浮动，触发了BFC

3.可以实现多栏布局

两个浮动元素相邻，另外一个元素设置overflow:hidden;触发了BFC

从零开始学习前端开发 — 18、BFC的更多相关文章

  1. 从零开始学习前端开发 — 11、CSS3选择器

    一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...

  2. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  3. 从零开始学习前端开发 — 17、CSS3背景与渐变

    一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...

  4. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

  5. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  6. 从零开始学习前端开发 — 14、CSS3变形基础

    一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...

  7. 从零开始学习前端开发 — 12、CSS3弹性布局

    一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...

  8. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  9. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

随机推荐

  1. RabbitMQ教程（一） ——win7下安装RabbitMQ

    RabbitMQ依赖erlang,所以先安装erlang,然后再安装RabbitMQ; 下载RabbitMQ,下载地址: rabbitmq-server-3.5.6.exe和erlang,下载地址:o ...

  2. what is cdecl?

    cdecl这是一个Linux上功能很强大的一个小型程序,它最主要的功能就是能帮助我们解释一个很复杂的C语言声明. 例如,我写了这样一个C语言的一个声明:int   *(*g[])(int , floa ...

  3. git 分支操作

    查看git分支: git fetch刷新git git branch  -a 列出所有的分支 git checkout origin/要切换的分支 git branch -r 查看远程分支 git c ...

  4. 鸟哥的linux私房菜学习-（三）X Window与文本模式的切换

    通常我们也称文本模式为终端机接口, terminal 或 console喔!Linux默认的情况下会提供六个Terminal来让使用者登陆, 切换的方式为使用:[Ctrl] + [Alt] + [F1 ...

  5. Integer和int

    例1: public static void main(String[] args){ Integer a = 128,b = 128; Integer c = 127,d = 127; System ...

  6. pagelatch等待在tempdb的gsm页面上

    Each data file has a gam page, sql will update it when allocate space in the file. Will see contenti ...

  7. Fiddler的hosts配置使用

    前提:使用fiddler的hosts配置,可以方便的配置自己想要测试环境,不需要每次配置hosts都到windows目录下去修改hosts文件 1.点击Tool->HOSTS,打开hosts的配 ...

  8. 转：java 可设置最大内存

    测试方法:在命令行下用 java -XmxXXXXM -version ,比如:java -Xmx1024M -version命令来进行测试,然后逐渐的增大XXXX的值,如果执行正常就表示指定的内存大 ...

  9. button的padding属性在i8下和chrome下表现不一致

    button的padding属性在i8下和chrome下表现不一致 在ie8下会撑破很多像素,撑破布局 padding: 10px 48px; padding: 1px 35px \0; /* pro ...

  10. Python正则表达式返回首次匹配到的字符及查询的健壮性

    re.findall(pattern,string)会搜索所有匹配的字符,返回的是一个列表,获取首个匹配需要re.findall(pattern,string)[0]访问, 但是如果findall没匹 ...