我们可能会遇到这样的一些问题，比如：子元素浮动，父元素高度塌陷；父元素跟随子元素一起移动等

这是我们可以通过触发BFC来解决这样的问题。

BFC为"块级格式化上下文"。它是一个独立的渲染区域，相当于是一个独立的环境。为一个元素里面创建这样的

环境，而这个元素本身是没有的，不会对周围的其他元素造成影响。

简单点就是：BFC就是⻚页⾯面上的⼀一个隔离的独⽴立容器，容器⾥里⾯面的⼦子元素不会影响到外⾯面的元素。反之也
如此

BFC布局的一些相关规则：

1、内部的BOX垂直一个一个放置；

2、垂直方向距离由margin决定，相邻两个margin会发生重叠

3、与包含块的左边相接触

4、不会与float重叠   等等

触发BFC：

1、根元素     body里面本身就是一个BFC环境
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible    //overflow：hidden 用的比较多

例如：

<style>
    .par  {
        border:  5px  solid  #fcc;
        width:  300px;

overflow:hidden;      // 通过它来触发BFC环境，就可以在child浮动时par的高度不塌陷
    }
    .child  {
        border:  5px  solid  #f66;
        width:100px;
        height:  100px;
        float:  left;
    }
</style>
<body>
    <div  class="par">
        <div  class="child"></div>
        <div  class="child"></div>
    </div>
</body>

一些BFC的更多相关文章

  1. 深入理解BFC

    定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...

  2. “fixed+relative==absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  3. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  4. 我对BFC的理解

    最初这篇文章打算回答寒冬大神的第一问,谈谈CSS布局.本来呢我以为布局主要涉及float跟display相关属性,以及他们的包含框.静态位置等等.后来看了大神的一片面试文章,嗯?这里怎么还有个BFC, ...

  5. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

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

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  7. BFC的形成条件和特性分析

    初学CSS时,我们学到很多有意思的CSS规则,比如外边距塌陷,还有浮动元素的一些特性等,其实这些规则背后都是BFC这个东西在控制,下面我们来看下BFC到底是什么. 什么是BFC BFC(Block f ...

  8. BFC布局

    这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍.这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自 ...

  9. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  10. BFC深入理解

    BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响 ...

随机推荐

  1. Django:Admin，Cookie，Session

    一. Admin的配置 1.Admin基础设置 admin是django强大功能之一,它能够从数据库中读取数据,呈现在页面中,进行管理.默认情况下,它的功能已经非常强大,如果你不需要复杂的功能,它已经 ...

  2. SQL Server UPDATE语句的用法详解

    SQL Server UPDATE语句用于更新数据,下面就为您详细介绍SQL Server UPDATE语句语法方面的知识,希望可以让您对SQL Server UPDATE语句有更多的了解. 现实应用 ...

  3. 为什么在JavaScript中0.1+0.2不等于0.3？

    0.1+0.2不等于0.3?是不是有点颠覆你的认知,但是,在js中,是真实存在的! console.log(0.1+0.2); // 0.30000000000000004 其实这都是因为浮点数运算的 ...

  4. http协议的状态码（200,404,503）

    http协议的状态码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101( ...

  5. C#中的CollectionBase用法

    ColectionBase中有List方法,返回的是类本身 class A :CollectionBase { public void add(B b) { List.Add(b); } public ...

  6. BA-siemens-insight_ppcl_adapts函数用法

    adapts函数是比pid调节性更好的自适应调节算法,比pid有更好的稳定性,具有震荡小.调节过程快.平稳等特点,函数的用法如下:

  7. PPAPI插件与浏览器的通信

    PPAPI的插件,原本是能够使用JS与浏览器交互的,https://code.google.com/p/ppapi/wiki/InterfacingWithJavaScript.这里还提供了一个JS与 ...

  8. 【手势交互】6. 微动VID

    中国 天津 http://www.sharpnow.com/ 微动VID是天津锋时互动科技有限公司开发的中国Leap Motion. 它能够识别并跟踪用户手部的姿态.包含:指尖和掌心的三维空间位置:手 ...

  9. c# 与java base64 不一致解决方案

    不一致的问题不是编码的问题  而是json字符串的问题通常我们会json 嵌套  我们先来看连个字符串 {"contentType":"","http ...

  10. 网络抓包工具 Fiddler

    网络抓包工具 Fiddler 下载网址 http://www.telerik.com/fiddler 简单介绍 Fiddler是一个http协议调试代理工具,它能够记录并检查全部你的电脑和互联网之间的 ...