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. 什么是NoSQL

    NoSQL = Not Only SQL 不仅仅是SQL NoSQL,指的是非关系型的数据库(没有声明性查询语言,没有预定义的模式,可以为键 - 值对存储,列存储,文档存储,图形数据库).不同于传统的 ...

  2. aos.js超赞页面滚动元素动画jQuery动画库

    插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...

  3. 三步快速解决dll冲突问题

    最近在推广应用我们的分布式服务网关(Web Api):业务组大部分对外的业务逻辑以HSF服务或者自定义扩展插件的方式,注册并发布到分布式服务网关中,统一对外提供WebApi服务.临时介绍下我们的分布式 ...

  4. WebService学习--股票走势图+天气预报实现

        互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示,下面就以获取股票数据和天气预报为例进行学习 ...

  5. xmlplus 组件设计系列之七 - 路由

    在浏览器端,对路由的理解一般是根据不同的 URL 完成页面的切换.在服务器端,则是根据不同的 URL 请求回馈相关的页面.在本章,我们讲述的是根据接收到的不同命令,路由组件呈现出不同的页面,这算是广义 ...

  6. [uva11992]Fast Matrix Operations（多延迟标记，二维线段树，区间更新）

    题目链接:https://vjudge.net/problem/UVA-11992 题意:n*m的矩阵,每次对一个子矩阵操作,有三种操作:加x,设置为x,查询.查询返回子矩阵和.最小值.最大值 n很小 ...

  7. grunt轻松入门

    项目目录,js源文件 gruntest Gruntfile.js package.json -- js ext community_plugin.js glogin_frm_cover.js iLog ...

  8. Python登录页面及

    写一段代码的流程,先用中文写出流程 #解释器 #编码 #登录,三次登录失败,锁定账户 #文件里保存用户信息 用户名|密码|登录次数 用户名|密码|登录次数 读取内容,r: 文件内容读进内存,read( ...

  9. 酷睿彩票合买代购网站管理系统 v2016 - 源码下载 有合买功能 有免费版 标准版 高级版

    源码介绍 免费版下载地址 电信 浙江腾佑 网鼎科技 正易网络下载 联通 网鼎联通   标准版联系QQ:1395239152 彩票合买代购网站管理系统公司独立开发,完全拥有软件自主知识产权.具有电脑We ...

  10. [刷题]算法竞赛入门经典(第2版) 5-13/UVa822 - Queue and A

    题意:模拟客服MM,一共有N种话题,每个客服MM支持处理其中的i个(i < N),处理的话题还有优先级.为了简化流程方便出题,设每个话题都是每隔m分钟来咨询一次.现知道每个话题前来咨询的时间.间 ...