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. Elasticsearch之入门知识

    elasticsearch是一个高度可扩展得开源全文搜索和分析的引擎.可以快速.近实时的存储,搜索和分析大量数据.通常用作底层引擎技术,为具有复杂搜索功能和要求的程序提供支持. 用处: • 运行网上商 ...

  2. centos7安装iptables

    使用CentOS 7时发现使用iptables防火墙时提示错误Unit iptables.service failed to load,意思是防火墙运行启动失败了,那么要如何处理呢.   一直用Cen ...

  3. 语义分割丨DeepLab系列总结「v1、v2、v3、v3+」

    花了点时间梳理了一下DeepLab系列的工作,主要关注每篇工作的背景和贡献,理清它们之间的联系,而实验和部分细节并没有过多介绍,请见谅. DeepLabv1 Semantic image segmen ...

  4. html 手机端click 事件去掉黑色阴影效果

    添加css样式 html{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} 1.  -web ...

  5. js js弹出框、对话框、提示框、弹窗总结

    js弹出框.对话框.提示框.弹窗总结 一.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 ======================== //弹 ...

  6. 在Window上用cmd创建.htaccess文件

    Windows 图形下不能直接建立空名字的文件,所以没法直接创建.htaccess文件,不过可以通过命令行创建: cd /path/to/your/dir/ type nul>.htaccess ...

  7. Vue-router 的练习

    使用了vue-cli 生成了一套webpack的模版. 之后在其中练习 vue-router. 以下是一些记录. 1.动态路由的配置 import Vue from 'vue' import Rout ...

  8. Android Generate Signed APK: Errors while building APK. You can find the errors ）

    开发过程中,总会遇到很多坑: Gradle build finished with 101 error(s) in 1m 35s 424ms 19:23:50 Generate Signed APK: ...

  9. DataPicker以及TimePicker显示时间和日期（屏幕上显示）

    public class MainActivity extends Activity { private DatePicker date_picker;private TimePicker time_ ...

  10. Smack+OpenFire搭建IM通信，包含心跳和自动重连（Android实现）

    Smack是一个开源,易于使用的XMPP(jabber)客户端类库.优点:简单的,功能强大,给用户发送信息只需三行代码便可完成.缺点:API并非为大量并发用户设计,每个客户要1个线程,占用资源大.Op ...