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. Vector HashMap List 存取数据速度

    数组大小:40000List_List:0.0045List :0.0818List_HashMap:0.0072HashMap :0.0517List_Vector:0.0037Vector :0. ...

  2. 女子监狱第四季/全集Orange Is the New Black迅雷下载

    女子监狱 第三季 Orange Is the New Black 3 (2015) 本季看点:该剧由<吉尔莫女孩>.<单身毒妈第一季>编剧杰姬·科恩的打造.由<护士当家& ...

  3. pycurl post

    pc = pycurl.Curl() pc.setopt(pycurl.POST, 1) pc.setopt(pycurl.URL, 'http://192.168.0.25:/Image') #pc ...

  4. Gradle 简介

    一.简介 Gradle 是 Android 现在主流的编译工具,虽然在Gradle 出现之前和之后都有对应更快的编译工具出现,但是 Gradle 的优势就在于它是亲儿子,Gradle 确实比较慢,这和 ...

  5. Guava ClassToInstanceMap

    概述 ClassToInstanceMap提供了一种是用Class作为Key, 对应实例作为Value的途径.他定义了T getInstance(Class<T>)和T putInstan ...

  6. arcgis server 10 for java 8399根目录是404的提示取消，并跳转到 地图目录 /arcgis/rest/services下

    看了Howto: 取消ArcGIS Server 9.x for Java内置tomcat在8399端口的文件列表 http://support.esrichina-bj.cn/2009/0819/9 ...

  7. C#多线程写日志

    由于程序是3层架构的,所有多线程记录日志成了比较棘手的问题,以前还真就没有在意过写日志的问题,认为不过是写文件罢了~~!如今发现原来要实现文件共享,并且能够使多线程同时操作日志还不能相互冲突,真的很麻 ...

  8. 使用rsync实现客户端与服务器端的文件同步与传送，重点是原理和参数解释

    1.什么是rsync?-rsync是类unix系统下的数据镜像备份工具——remote sync.一款快速增量备份工具 Remote Sync,远程同步 支持本地复制,或者与其他SSH.rsync主机 ...

  9. Threejs 开发3D地图实践总结【转】

    Threejs 开发3D地图实践总结   前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂 ...

  10. Sharepoint2013 Report Service初探

    首先需要建立相应的report报表 如图: 这里的sql如下: SELECT PC.Name AS Category, PS.Name AS Subcategory, DATEPART(yy, SOH ...