一、 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. java 分解质因数

    算法目的:对一个正整数分解质因数 一.算法分析: 1.建立整数列表,保存求到的因数. 2.声明整数i=2,用以递增取模:整数m,用于临时保存n 3.建立while循环,i小于等于整数m时,判断m%i, ...

  2. python中顺序查找分析和实现

    顺序查找算法是一种很基本的查找算法,该算法的复杂度一般是最大是O(n),假如加上顺序查找,算法的复杂度 还要降一倍,为O(n/2). Python的代码实现如下所示: def sequential_s ...

  3. 在File Explorer的当前路径上直接打开VS Code

    在C:\windows\system32文件下创建code.bat文件, 内容如下: @echo offstart "" "%ProgramFiles(x86)%\Mic ...

  4. ubuntu16.04安装flash player与谷歌浏览器(chrome)

    一,安装 adobe flash player sudo apt-get upgradesudo apt-get install flashplugin-installer 二,安装chrome浏览器 ...

  5. webstorm工具的字体、主题等相关设置

    Ctrl + /:单行注释Ctrl + Shift + /:块注释Ctrl + Alt + ↓:向下复制当前行Alt + ↑:向上移动Alt + ↓:向下移动Ctrl + D:删除当前行Ctrl + ...

  6. 获取Windows系统中的所有可用和在用串口

    目的:获取Windows系统中的所有可用和在用串口 方法:注册表查询法 优点:简单.实用.快速.无遗漏,无多余结果. 说明:另外还有8种方法可以枚举串口,但都不如此法. 代码和详细注释如下: //-- ...

  7. Mtklog 分析(学习)

    常见log异常类型: JE  NE KE EE(external(modem) exception) 一.常见应用异常搜索关键信息 1. 常见应用crash的(系统提示***已停止运行) ,可以在ma ...

  8. 【sunday算法】玄学字符串匹配

    和KMP相似,用于字符串的匹配,貌似平均复杂度比KMP快,也比KMP更好理解. 大概意思是: 如果串b被串a包含,那么串a此时与串b匹配的部分一定一样 所以如果从开头开始匹配到不同处时,在a串找中此时 ...

  9. PE文件详解（五）

    在前面几节中经常提到相对虚拟地址RVA,在这篇博客中主要说明这个概念.本来是想接着转载小甲鱼的,但是我自己根据这篇文章和他的视频来学习的时候,发现在RVA与文件的相对偏移地址进行转化的时候,那块我看不 ...

  10. 使用sysbench对mysql压力测试

    sysbench是一个模块化的.跨平台.多线程基准测试工具,主要用于评估测试各种不同系统参数下的数据库负载情况.关于这个项目的详细介绍请看:https://github.com/akopytov/sy ...