1，什么是BFC

　　BFC（Block Formatting Context）块级格式化上下文，它就是一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局。它是W3C CSS2.1规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level box如何布局，并且这个区域与外部毫不想干，

2，生成BFC

　　下面的方法可以创建一个新的BFC

　　（1）浮动元素，float: left | right

　　（2）绝对定位元素，position: absolute | fixed

　　（3）块级元素以及块级容器（比如display: inline-block、table-cell、table-capation）

　　（4）overflow值不为visible的块级盒子

3，BFC的主要应用

　　（1）浮动元素的塌陷问题。BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。当一个元素中的子元素浮动了，这个父元素就会发生高度塌陷问题。如下代码所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BFC</title>

    <style>

        .content {

            width: 100%;

            border: 2px solid #9acd32;

        }

        .content1{

            width: 100px;

            height: 100px;

            background: red;

            float: left;

            margin-left: 20px;

        }

        .content2{

            width: 100px;

            height: 100px;

            background: green;

            float: left;

            margin-left: 20px;

        }

        .content3{

            width: 100px;

            height: 100px;

            background: blue;

            float: left;

            margin-left: 20px;

        }

    </style>

</head>

<body>

    <div class="content">

        <div class="content1"></div>

        <div class="content2"></div>

        <div class="content3"></div>

    </div>

</body>

</html>

　　所以照成这种现象的原因就是浮动元素创建了一个新的BFC，成为了一个独立的容器，不会影响到外部的父元素，因此就会照成高度崩塌。知道了原因所在，我们就可以很自然的想到解决这种问题的通常的办法，为父元素设置overflow:hidden，这样父元素就生成一个新的BFC，将浮动的元素包含起来，从而成为一个独立容器。这样外面的元素不再受其浮动的影响，从而达到清除浮动的作用。

        .content {

            width: 100%;

            border: 2px solid #9acd32;

            overflow: hidden;

        }

　　

　　（2）边距折叠问题。相邻两个盒子之间的垂直间距是被margin属性决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。照成这种问题的原因就是属于同一个BFC的关系（跟BFC）。只要我们让其不在同一个BFC就可以解决了。

CSS布局基础--BFC的更多相关文章

  1. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  2. CSS 布局和 BFC

    什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...

  3. css布局基础总结

    前端css布局知识繁杂,实现方式多种多样.想写出高效.合理的布局,必须以深厚的css基础为前提.为了方便记忆和复习,将css布局要点记录如下.内容较多,应用方面说的不太详细,但都是很实用的点. 所谓布 ...

  4. CSS布局基础

    (初级)css布局 一.单列布局1.基础知识块级元素 div p ul li dl dt 行级元素 img span input strong同一行显示.无换行2.盒子模型盒子模型 (边框border ...

  5. 分析CSS布局中BFC

    1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  6. [CSS布局基础]居中布局的实现方式总结

    [原创]码路工人 Coder-Power 大家好,这里是码路工人有力量,我是码路工人,你们是力量. github-pages 博客园cnblogs 做Web开发少不了做页面布局.码路工人给大家总结一下 ...

  7. CSS布局基础之二认识Viewport

    什么是viewport viewport,等同于浏览器窗口. 功能:约束你网站中最顶级包含块(containing block)元素html标签. 什么是包含块(containing block)?下 ...

  8. CSS布局之BFC和IFC

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...

  9. CSS布局基础之一设备像素，设备独立像素，设备像素比，css像素之间的关系

    设备像素dp(device pixels) ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像. 计算公式:ppi=像素数量/物 ...

随机推荐

  1. Redis特点

    内存存储,速度极快. 支持的数据类型多,相比较其他的Nosql. 键:字符串 值的六种数据结构:字符串,列表,散列,集合,有序集合,HyperLogLog 附加功能强大

  2. C#私有的构造函数的作用

    C#私有的构造函数的作用:当类的构造函数是私有的时候,也已防止C1 c1=new C1();实例化类.常见的应用是工具类和单例模式. using System;using System.Collect ...

  3. springmvc整合elasticsearch

    网上大多时关于springboot整合的,也有spring的,但是 坑太多,都没法愉快的玩耍 这篇让我整合成功 https://www.cnblogs.com/sunny1009/articles/7 ...

  4. jquery测试解析

    1.下列获取元素范围大小顺序错误的是 (选择一项) 1 A: B: C: D: 本题选择D 解析: 获取元素范围大小顺序依次为: $(#one).siblings("div")&g ...

  5. aspectj xml

    1.接口和类 1.1 ISomeService 接口 public interface ISomeService { public void doSome(); public void dade(); ...

  6. java.lang.IllegalArgumentException: name MUST NOT NULL! at org.nutz.dao.impl.NutDao.fetch

    Nutz传值报错问题 作者:Vashon 时间:20150902 平台:Nutz框架 Java后台方法中拿值时报的错 报错信息: java.lang.IllegalArgumentException: ...

  7. vue.js与react.js相比较的优势

    vue.js的简介 vue.js是一个javascript mvvm库,它是以数据驱动和组件化的思想构建的.我们平时多用js去操作dom,vue.js则是使用了数据绑定驱动来操作dom的,也就是说创建 ...

  8. 三、绘图和可视化之matplotlib

    #matplotlib简单绘图之plot import matplotlib.pyplot as plt a=[1,2,3] b=[10,2,30] plt.plot(a)#纵坐标为a的值,横坐标为a ...

  9. C++判断两个double类型双精度浮点数是否同号

    看到的一种整数的方法 != y < ) 由此, double x,y; == fabs( ) { } 目前想到的比较合适判断方法. 此外这里还有一种强制转换类型求符号位的方法. /** * Ge ...

  10. blog.yiz96.com

    欢迎访问我的新博客 blog.yiz96.com