1、示例代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>BFC</title>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

            }

        </style>

    </head>

    <body>

        <!--parent的高度是110px，若没有形成BFC的话，高度是100px-->

        <style type="text/css">

            .child {

                height: 100px;

                margin-top: 10px;

            }

            .parent {

                /*形成bfc*/

                overflow: hidden;

                border: 1px solid yellow;

            }

        </style>

        <div class="parent">

            <div class="child">

                1

            </div>

        </div>

        <!--同级的元素垂直编剧会重叠-->

        <style type="text/css">

            .s1 {

                height: 100px;

                margin-bottom: 20px;

                border: 1px solid red;

                overflow: hidden;

            }

            .s2 {

                height: 100px;

                margin-top: 30px;

                overflow: hidden;

                border: 1px solid blue;

            }

        </style>

        <div class="s1">

        </div>

        <div class="s2">

        </div>

        <!--解决方法是：将某一个同级元素已添加父元素，使父元素形成BFC-->

        <style type="text/css">

            .s1 {

                height: 100px;

                margin-bottom: 20px;

                border: 1px solid red;

                overflow: hidden;

            }

            .s2 {

                height: 100px;

                margin-top: 30px;

                overflow: hidden;

                border: 1px solid blue;

            }

        </style>

        <div class="s1">

        </div>

        <div style="overflow: hidden;">

            <div class="s2">

            </div>

        </div>

        <script type="text/javascript">

        </script>

    </body>

</html>

2、说明

（1）形成BFC的元素，会在垂直方向叠加margin  （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin）

（2）形成BFC的元素，不会与浮动元素重叠

（3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局

（4）形成BFC的元素的高度会将浮动元素计算在内。

3、形成BFC的条件

（1）float不为none

（2）position不为relative和static

（3）overflow不为visible

（4）dispaly为inline-block、table-（具有table的属性）

BFC特性 形成BFC的更多相关文章

  1. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  2. 元素的BFC特性与自适应布局

    一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...

  3. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  4. css学习_css BFC特性（块级格式化上下文）

    块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1.什么是BFC? 就是一个封闭独立的渲染的区域 2.什么元素会有BFC的条件? ---块级元素会有,行 ...

  5. BFC特性及其简单应用

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

  6. BFC特性下多栏自适应布局

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

  7. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

  8. HTML+CSS : 笔记整理(2 常规流,BFC,固定定位,z-index)

    BFC和常规流的关系是什么:常规流遵循BFC,IFC规则. 定位规则总体来说三种: 常规流,浮动,绝对定位(CSS3里面新加了一种flex) 其中常规流包括BFC,IFC等规则,块级元素一个一排地从上 ...

  9. BFC(块级格式化上下文)笔记

    BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...

随机推荐

  1. input输入框只能输入正整数正则

    input输入框加入限制只能输入正整数,输入其他字符会自动清除: <input type="text" value="1" onkeyup="i ...

  2. POST 和 PUT 方法区别

        Http定义了与 服务器的交互方法,其中除了一般我们用的最多的GET,POST 其实还有PUT和DELETE 根据RFC2616标准(现行的HTTP/1.1)其实还有OPTIONS,GET,H ...

  3. Java_并发线程_Semaphore、CountDownLatch、CyclicBarrier、Exchanger

    1.Semaphore 信号量(Semaphore),有时被称为信号灯,是在多线程环境下使用的一种设施, 它负责协调各个线程, 以保证它们可以正确.合理的使用公共资源. Semaphore当前在多线程 ...

  4. LINQ to XML 建立，读取，增，删，改

      LINQ to XML的出现使得我们再也不需要使用XMLDocument这样复杂的一个个的没有层次感的添加和删除.LINQ可以使的生成的XML文档在内存中错落有致.下面以一个小的例子说名LINQ ...

  5. Easyui layout设置满屏效果

    html文件: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  6. MySQL中的IFNULL，IF，NULLIF函数

    MySQL中的IFNULL函数和IF函数 MySQL中的IFNULL函数类似于Oracle中的NVL函数,其表达式为:IFNULL(expr1,expr2),含义是:如果第一个参数不为空,则返回第一个 ...

  7. ArrayBlockingQueue, LinkedBlockingQueue, ConcurrentLinkedQueue, RingBuffer

    1. ArrayBlockingQueue, LinkedBlockingQueue, ConcurrentLinkedQueue ArrayBlockingQueue, LinkedBlocking ...

  8. 【数字图像处理】使用kmeans算法对TrueColor图片进行优化

    实验的主要内容是将truecolor的图片通过一个优化算法得到其256色的最优表示.本实验采用kmean做算法对像素的色彩进行聚类的计算,分类得到一个色彩数为256的CodeBook,和一个包含有Co ...

  9. maskrcnn_benchmark代码分析(3)

    数据结构 数据加载 数据后处理

  10. C++ stringstream格式化输出输入探索

    - 最近在笔试时经常遇见各种输入问题,于是细心总结一波: - 首先string str; cin>>str;遇到空格结束: - 于是乎产生了getline(),可与得到一行字符串:空格自动 ...