BFC:Block-level box           +   Forating  +           Context;

　-------》块元素          决定其子元素如何定位，及元素关系

-------》“块级格式化上下文”

BFC：就是页面的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之如此（外边也不影响里面）

display：inline-block  阻止嵌套元素margin重叠；

overflow:hidden  超出部分隐藏、  还可以清除内部（float）浮动；

。。。。

10 分钟理解 BFC 原理

前端精选文摘：BFC 神奇背后的原理

BFC原理详解

浅析BFC及其作用

史上最全面、最透彻的BFC原理剖析

【CSS】深入理解BFC原理及应用

BFC原理及其应用

BFC 原理的更多相关文章

  1. CSS 盒模型、解决方案、BFC 原理讲解--摘抄

    PS:内容比较基础,目的只是覆盖面试知识点,大佬可以 history.back(-1) W3C 标准盒模型 & IE 怪异盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模 ...

  2. 10分钟理解BFC原理

    10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...

  3. 前端里神奇的BFC 原理剖析

    以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 B ...

  4. BFC原理

    一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  5. CSS—BFC原理解析与应用

    我们在很多地方都见过BFC这个词,或许能够知道大概意思,但是有时候它的具体原理以及作用会记得很模糊,下面就对BFC这个概念深入学习下. 块级格式化上下文(Block Formatting Contex ...

  6. BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  7. 10 分钟理解 BFC 原理

    一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...

  8. <HTML/CSS>BFC原理剖析

    本文讲了BFC的概念是什么: BFC的约束规则:咋样才能触发生成新的BFC:BFC在布局中的应用:防止margin重叠(塌陷,以最大的为准): 清除内部浮动:自适应两(多)栏布局. 1. BFC是什么 ...

  9. BFC原理解析

    BFC的概念 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 它是 ...

随机推荐

  1. NVIDIA显卡笔记本安装ubuntu驱动以及分辨率之详解

    随着对ubuntu的了解,突然想在自己的笔记本上装一个双系统.在网上查了安装方法之后,发现因为nvidia显卡的原因会出现一些问题,结果在我自己装了之后发现问题要比看到的多,再看了无数个帖子之后,最终 ...

  2. Python语法的转义字符

    Python语法的转义字符 转义字符 说 明 \ 续行符 \n 换行符 \0 空  \t 水平制表符,用于横向跳到下一制表位 \'' 双引号 \' 单引号 \\ 一个反斜杠 \f 换页 \0dd 八进 ...

  3. MC9SD64单片机快速入门 I/O寄存器

    I/O的使用 数据方向寄存器和数据寄存器的配置 I/O输入输出的使用: 数据方向寄存器与数据寄存器 寄存器的概念: 寄存器,是集成电路中非常重要的一种存储单元,通常由触发器组成.在集成电路设计中,寄存 ...

  4. shell linux 环境下循环遍历文件夹下所有文件

    demofun(){ ` do if test -f $file then echo "file: $file" elif test -d $file then echo &quo ...

  5. 老生常谈：Windows的7类安全漏洞

    这是篇比较老的文章,但是现在翻出来发下,还是会让大家对Windows的安全漏洞有所了解.建议大家阅读<软媒原创:如何从根上保证电脑安全.不中毒>. 目前微软系列产品中,危害计算机安全的漏洞 ...

  6. 05.Python网络爬虫之三种数据解析方式

    引入 回顾requests实现数据爬取的流程 指定url 基于requests模块发起请求 获取响应对象中的数据 进行持久化存储 其实,在上述流程中还需要较为重要的一步,就是在持久化存储之前需要进行指 ...

  7. 5255 -- 【FJOI2016】神秘数

    5255 -- [FJOI2016]神秘数 Description 一个可重复数字集合\(S\) 的神秘数定义为最小的不能被 \(S\) 的子集的和表示的正整数.例如: \(S = {1,1,1,4, ...

  8. Jenkins+Ansible+Gitlab自动化部署三剑客-Ansible本地搭建

    可以通过git bash连接linux 关闭防火墙,禁用防火墙开机启动,并更爱selinux文件,重启 重新登录并检查禁用 getenforce 安装git yum -y install git ns ...

  9. JavaScript模块载入框架sea.js 学习一

    简单总结sea.js 学习 文件文件夹结构   /sea/sea.js      下载地址  http://seajs.org/docs/#downloads   /sea/jquery-sea.js ...

  10. CDB与PDB之间的切换方法

    Oracle 12c 开始支持 PLUGGABLE DATABASE,并且提供了一个方法在CDB和PDB之间切换. 1. 使用 show pdbs 可以确认当前有哪些PDB? SQL> show ...