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. jquery 图片文件转base64 显示

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  2. 使用开源库 Objective-C RegEx Categories 处理正则表达式

    Objective-C RegEx Categories https://github.com/bendytree/Objective-C-RegEx-Categories 使用说明:将 RegExC ...

  3. spring源代码分析

    预初始化beanDefaultListableBeanFactory preInstantiateSingletons

  4. 《TCP/IP网络编程》

    <TCP/IP网络编程> 基本信息 作者: (韩)尹圣雨 译者: 金国哲 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:9787115358851 上架时间:2014-6- ...

  5. 《Software Design中文版01》

    <Software Design中文版01> 基本信息 作者: (日)技术评论社 译者: 苏祎 出版社:人民邮电出版社 ISBN:9787115347053 上架时间:2014-3-18 ...

  6. 深入探索 JUnit 4

    开始之前 关于本教程 引入 Java 5 注释为 JUnit 带来了显著改变,使它从一个受广大开发人员了解和喜爱的测试框架转变成了一个更为精简但却不那么为人熟知的框架.在本教程中,我将探讨 JUnit ...

  7. Shell变量while循环内改变无法传递到循环外

    转自: https://blog.csdn.net/shawhe/article/details/65631543 今天刷Leecode(192 Word frequency)时,遇到一个shell语 ...

  8. [leetcode]Best Time to Buy and Sell Stock II @ Python

    原题地址:https://oj.leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ 题意: Say you have an array ...

  9. Redis学习手册(主从复制)(转)

    一.Redis的Replication: 这里首先需要说明的是,在Redis中配置Master-Slave模式真是太简单了.相信在阅读完这篇Blog之后你也可以轻松做到.这里我们还是先列出一些理论性的 ...

  10. 通过js去掉所有的html标签，得到HTML标签中的所有内容

    <script> //替换掉所有的 html标签,得到Html标签中的内容 var s="<P><FONT face=宋体 color=#000000> ...