BFC:Block Formatting Contexts–块级元素格式化上下文

1.BFC定义

它决定了块级元素如何对它的内容进行布局，以及与其它元素的关系和相互作用

关键词解释：

块级元素：父级（是一个块元素）

内容：子元素（是一个块元素）

其它元素：与内容同级别的兄弟元素

相互作用：BFC里的元素与外面的元素不会发生影响

2.BFC触发方式

2.BFC的布局规则

3.普通文档流布局规则

4.代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--

            触发BFC的方式（以下任意一条就可以）

                1、float的值不为none

                2、overflow的值不为visible

                3、display的值为table-cell、table-caption和inline-block之一

                4、position的值不为static或者releative中任何一个

            普通文档流的布局规则

                1、浮动的元素是不会被父级计算高度

                2、非浮动元素会覆盖浮动元素的位置

                3、margin会传递给父级

                4、两个相邻的元素上下margin会重叠

            BFC的布局规则

                1、浮动的元素会被父级计算高度(父级触发了BFC)

                2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）

                3、margin不会传递给父级（父级触发了BFC）

                4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发了BFC）

        -->

        <!--

            1、浮动的元素会被父级计算高度(父级触发了BFC)    使用display不为none触发BFC

        -->

        <div style="border: 1px solid #f00; display: inline-block;">

            <div style="width: 100px; height: 100px; background: green; float: left;">div1----</div>

        </div>

        <!--

            2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）  使用overflow不为visible触发BFC

        -->

        <div style="border: 1px solid #f00; margin-top: 100px;">

            <div style="width: 100px; height: 100px; background: green; float: left;">kaivon1</div>

            <div style="width: 100px; height: 100px; background: red; overflow: hidden;">kaivon2</div>

        </div>

        <!--

            3、margin不会传递给父级（父级触发了BFC）    使用overflow不为visible触发BFC

        -->

        <div style="background: blue; margin-top: 100px; overflow: hidden;">

            <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">kaivon1</div>

            <div style="width: 100px; height: 100px; background: red;">kaivon2</div>

        </div>

        <!--

            4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发了BFC）  使用overflow不为visible触发BFC

        -->

        <div style="margin-top: 100px;">

            <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">kaivon1</div>

            <div style="overflow: hidden;">

                <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">kaivon2</div>

            </div>

        </div>

    </body>

</html>

效果图：

5.对于IE不支持BFC问题的处理，Layout布局

链接地址：http://blog.csdn.net/baidu_37107022/article/details/71640304

一天搞定CSS：BFC布局与普通文档流布局比较--15的更多相关文章

  1. 一招搞定css页面布局

    如何做出漂亮的页面: 1. 多写页面,多改. 2. 多写页面,多改. 3. 多写页面,多改. 大致的思想步骤: 写页面的时候先规划好大致的分块,无论是用定位或者浮动,首先要确定要应用的场景,使用完浮动 ...

  2. sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...

  3. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  4. 布局转换：文档流->绝对定位

    布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大 ...

  5. 一行css代码搞定响应式布局

    在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HT ...

  6. 前端实战Demo：一张图片搞定一页布局

    对前端程序员来说,从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功,但是一般的程序员可能对切图并非那么熟悉,所以可能有很多时间都花在使用Photoshop上,那么这里就有一种方法可以减 ...

  7. 十分钟搞定CSS选择器

    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. ...

  8. (转)十分钟搞定CSS选择器

    原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下 ...

  9. 一天搞定CSS（扩展）：CSS Hack

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

随机推荐

  1. html 初始化

    //  html 初始化 <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  2. Android启动篇 — init原理（一）

    ========================================================          ================================== ...

  3. R语言与SQL server链接

    第一步:创建数据源(方法见下面链接) http://www.2cto.com/database/201412/365396.html 第二步:在R中输入以下代码: #####SQL SERVER与R语 ...

  4. 【从无到有】JavaScript新手教程——2.分支结构和循环

    介绍完JS的简介和向量以及运算符,大家对JS也有了初步的了解和认识,今天带大家来看一下JS中常用的分支结构以及循环结构是怎么使用的 [JS中的分支结构] 一.[if-else结构] 1.结构写法: i ...

  5. 关于用jQuery的animate方法实现的动画在IE中失效的原因以及解决方法

    这几天在学jQuery,本身还只是一个新手,写了一个简单的动画--圆形头像的缩放.本身是用Firefox进行调试的,一切进行的很顺利,缩放可以按照预期执行,结果拿到IE上去之后,发现缩放动画失效了.后 ...

  6. dotnetcore中的IOptionsSnapshot<>的自动更新原理

    1.首先讲讲ChangeToken.OnChange方法: 原理是给一个CancellationToken注册一个消费者委托,调用CancellationToken的Cancel的时候会调用这个Can ...

  7. JSON 解析工具的封装(Java)

    JSON 解析工具的封装(Java) 一直想有一个属于自己的JSON工具,今天终于弄好了..... 1.添加pom依赖包 <!--json解析--> <dependency> ...

  8. C语言的一些基础

    一.C语言基础: 1.1.main函数是入口函数,用于进行link. 1.2..sln是解决方案的管理文件. 1.3.int:32位.short:16位.long:32位.long long:64位. ...

  9. 日期时间插件flatpickr.js使用方法

    今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件.一开始先 ...

  10. C++模板学习：函数模板、结构体模板、类模板

    C++模板:函数.结构体.类 模板实现 1.前言:(知道有模板这回事的童鞋请忽视) 普通函数.函数重载.模板函数 认识. //学过c的童鞋们一定都写过函数sum吧,当时是这样写的: int sum(i ...