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. C#-非泛型集合的方法

    非泛型集合的类和接口位于System.Collections命名空间 如:列表.队列.位数组.哈希表和字典的集合     ArrayList 动态数组 可被单独索引的对象的有序集合可以使用索引在指定的 ...

  2. web前端（3）—— html标签及web页面结构

    本节内容简单介绍下html都有哪些标签 还是百度首页,查看源代码看看: 我把源代码复制下来另存为html文件里: 注意:网页文件的后缀都是html或者htm 我这用的pycharm编辑器(Python ...

  3. solidity高级理论(三)：时间单位与view

    solidity高级理论(三):时间单位与view 关键字:时间单位.view.Gas优化 solidity使用自己的本地时间单位 变量 now 将返回当前的unix时间戳(自1970年1月1日以来经 ...

  4. Asp.Net WebApi 项目及依赖整理

    一.目前版本 Microsoft ASP.NET Web API 2.2 对应程序集版本5.2.3 二.默认生成的配置文件中的内容 <packages> <package id=&q ...

  5. c/c++ 网络编程与多线程 编译参数

    网络编程与多线程 编译参数 编译时要链接操作系统的pthread库 g++ -g socket01.cpp -std=c++11 -pthread 不加-pthread的话,出现下面的错误: term ...

  6. Windows Server 2016-Wbadmin命令行备份域控制器

    在上一章我们讲到Windows Server 2016-图形化备份域控制器的方法,本章我们聊聊如何通过命令行Wbadmin对域控制器进行备份.在Windows Server Active Direct ...

  7. Windows Server 2016-系统安装软硬件要求

    本章为大家补充介绍安装 Windows Server 2016的最低系统要求. 如果安装时选择通过"服务器核心"选项进行安装,则应注意,没有安装任何 GUI 组件,并且将不能使用服 ...

  8. Docker 入门到实践（三）Docker 安装

    注意:不要在没有配置 Docker APT 源的情况下直接使用 apt 命令安装 Docker. 一.准备工作 系统要求 Docker CE 支持一下版本的 Ubuntu 操作系统 Cosmic 18 ...

  9. Lingo求解线性规划案例2——多阶段投资问题

     凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 某公司现有资金30万元可用于投资,5年内有下列方案可供采纳:   1号方案:在年初投资1元,2年后可收回1. ...

  10. 关于pycharm中使用charts无法显示图表的问题（属于个人粗心问题）

    在练习用charts库对爬取的数据进行数据分析并图表化时遇到一个问题,无法显示图表,如下: 经过重装charts库等一顿折腾后,终于发现一个问题,看这里: def data_gen(type): le ...