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. HTML5+Java(Spring下) 拍照上传图片

    使用支持html5的浏览器,找个有摄像头,再建一个文件接收base64字串的图片然后保存就哦了 <html> <head runat="ReYo-Server"& ...

  2. java中 列表，集合，数组之间的转换

    java中 列表,集合,数组之间的转换 java中 列表,集合,数组之间的转换 java中 列表,集合,数组之间的转换 List和Set都是接口,它们继承Collection(集合),集合里面任何数据 ...

  3. [leetcode]Best Time to Buy and Sell Stock III @ Python

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

  4. LeetCode 总结

    LeetCode 方法详解

  5. 如何让我domain里的机器都跟domain controller的时间保持一致?

    貌似是应该先在PDC上设一个时间源服务器, 然后, 再让domain里所有的机器都去与PDC去sync时间即可. 可是笔者的环境里, 怎么都配不同, 我觉得可能是实验室的网络有什么特别的设置吧. 不管 ...

  6. springboot下配置多数据源

    摘自: http://blog.csdn.net/wangqingqi20005/article/details/52613055

  7. pThreads线程（二） 线程同步--互斥量/锁

    互斥量(Mutex)是“mutual exclusion”的缩写.互斥量是实现线程同步,和保护同时写共享数据的主要方法. 互斥量对共享数据的保护就像一把锁.在Pthreads中,任何时候仅有一个线程可 ...

  8. Flask Restful服务简单实现

    官网:http://flask.pocoo.org/docs/1.0/quickstart/#routing 1.安装 windows下:pip3 install Flask 具体参照:windows ...

  9. Spark Structured Streaming：将数据落地按照数据字段进行分区方案

    方案一(使用ForeachWriter Sink方式): val query = wordCounts.writeStream.trigger(ProcessingTime(5.seconds)) . ...

  10. Linux echo 显示内容颜色

    Linux echo 显示内容颜色 https://www.cnblogs.com/kimbo/p/6816566.html #字体颜色:30m-37m 黑.红.绿.黄.蓝.紫.青.白 str=&qu ...