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. Apriori算法(C#)

    AprioriMethod.cs using System; using System.Collections.Generic; using System.Linq; using System.Web ...

  2. pixi.js

    添加基本文件(库文件) 渲染库 pixi.js pixi.lib.js是pixi.js的子集,依赖class.js,cat.js,event_emiter.js文件 pixi.scroller.js ...

  3. codeforces 757F Team Rocket Rises Again

    链接:http://codeforces.com/problemset/problem/757/F 正解:灭绝树. mdzz倍增lca的根节点深度必须是1..我因为这个错误调了好久. 我们考虑先求最短 ...

  4. [进程管理]Load和CPU利用率是如何算出来的

    本文内容遵从CC版权协议, 可以随意转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明 网址: http://www.penglixun.com/tech/system/how_to_ca ...

  5. IE报vuex requires a Promise polyfill in this browser问题解决

    使用Vuex, IE浏览器报错 因为使用了 ES6 中用来传递异步消息的的Promise,而IE低版本的浏览器不支持. ##解决方法 第一步: 安装 babel-polyfill . babel-po ...

  6. PHP学习笔记-2

    PHP 是一门弱类型语言: 在上面的实例中,我们注意到,不必向 PHP 声明该变量的数据类型.(跟Javascript很像啊!) PHP 会根据变量的值,自动把变量转换为正确的数据类型. 在强类型的编 ...

  7. Ajax与Pjax请求在服务端是如何识别的

    我在后台处理ajax和一般的网页请求时,一般是需要额外加个参数进行区分的.比如使用get参数的is_ajax=1,后台判断有is_ajax=1成立时,表明该请求是ajax请求,遂可区分处理.我正在使用 ...

  8. hammer的初始化及移动端各种滑动

    前言:本人对hammer了解不是很多,早做项目时遇到了手机端的一些滑动事件,特此分析下hammer的某些属性. hammer.js是一款开源的移动端脚本框架,他可以完美的实现在移端开发的大多数事件,如 ...

  9. HTML基础知识入门

    好的,我们开始吧,打开Eclipse,新建一个项目,就叫做Base吧,基础班的意思.注意哦,要建一个JavaWeb项目.右键,new,Dynamic Web Project,如果出来的菜单项没有,就点 ...

  10. linux安装vmware tools 步骤

    虚拟机 -- 安装 VMware Tools 会自动挂载光驱. 1.  cd /misc/cd 2.  copy 文件到临时文件夹cp VMwareTools-9.6.2-1688356.tar.gz ...