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. spring 5.0.1.RELEASE官方任然不支持velocity(平台升级)

    官方说明: Dear Spring community, It is my pleasure to announce that Spring Framework 5.0.1 is available ...

  2. TK1 设置最大频率

    支持的值:cat /sys/kernel/debug/clock/gbus/possible_rates当前值:cat /sys/kernel/debug/clock/gbus/rate 设置最大值: ...

  3. protobuf 语法简介

    protobuf 语法简介 1.基本语义 在.proto文件中,最基本的数据类型为message,如其定义所示,由message引导,之后是message类型的名字,之后是由{}包含的各个域(fiel ...

  4. 什么是 Event Loop？

    http://www.ruanyifeng.com/blog/2013/10/event_loop.html 什么是 Event Loop? 作者: 阮一峰 日期: 2013年10月21日 [2014 ...

  5. （八十七）AutoLayout的简单介绍与实例

    AutoLayout是继AutoResizing之后的一种自己主动布局方法.攻克了AutoResizing无法处理控件间相互关系的问题. AutoLayout在storyboard中通过底部工具条设置 ...

  6. Martin Fowler谈微服务的优缺点

    很多开发团队已经认识到微服务架构比单体架构更优越.但是也有其他团队感觉到这是一种消弱生产力的负担.就像任何软件架构,微服务架构同样有利弊.为了能做出一个明智的选择,你必须了解这些应用并将它们运用到你特 ...

  7. Win2008建立域时administrator账户密码不符合要求

    在win2008中建立域时,有时会出现administrator账户密码不符合要求的现象,报错会说明目前本地administrator账户不需要密码.这是什么原因造成的呢?原来,目前的2008镜像在网 ...

  8. C++ 变量默认初始值不确定(代码测试)

    C++ int变量默认初始值是不确定的,因此使用时初始化是很有必要的. 下面写个小程序测试一下int变量默认初始值. #include <iostream> #include <ve ...

  9. 【总结】关于MediaPlayer中的getCurrentPosition()和seekTo(int)的总结

    在使用音频时,需要用到MediaPlayer,除了一些基础的方法之外,比较难掌握的就是设计播放点的调转的地方,进过反复调试,我最终找到一个可以让getCurrentPosition()和seekTo( ...

  10. 用VS自带的打包程序打包Web程序，安装时安装中断

    出现这种问题,可能是你的IIS的兼容性问题: 把IIS兼容性安装好,再试试,应该可以了.