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. npm详解

    一.npm介绍及安装 对于npm,大家多多少少都用过,作为一门技术,我想写篇博客记录一下,一起分享,一起学习. npm,是Node Package Manager的缩写,node的模块管理器,它是随同 ...

  2. AngularJs 4大核心

    放弃了IE8, 4大核心: MVC: 数据模型,视图层,业务逻辑和控制模式(控制器), 为何MVC不是设计模式呢?(23种设计模式里没有MVC,MVC模式的目的就是实现Web系统的职能分工,超越了设计 ...

  3. JAVA压缩图片 服务器端压缩图片 原创

    @RequestMapping(value = "/uploadImage", method = RequestMethod.POST) @ResponseBody public ...

  4. c的旅程---字符

    输出菱形实验: /***************** 2017年四月十六. 第一个例子,输出菱形.就是找关系. 这是当n= 3时, * *** * ******************/ #inclu ...

  5. 【Java基础】Java类的加载和对象创建流程的详细分析

    相信我们在面试Java的时候总会有一些公司要做笔试题目的,而Java类的加载和对象创建流程的知识点也是常见的题目之一.接下来通过实例详细的分析一下. 实例问题 实例代码 Parent类 package ...

  6. phpmyadmin的初始账号密码是多少

    问这个问题,是不是有点弱智,但是这个问题确实阻塞了我那么几分钟. 实际上问题很简单,初始账号是root,密码为空

  7. css3 transition 和 animation实现走马灯

    这段时间在做一个App,H5的开发.页面上有公告 以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

  8. office web apps 部署-搭建office web apps服务器

    二.搭建office web apps服务器 相关文件可以去焰尾迭分享的百度网盘下载,下载地址:http://pan.baidu.com/s/1o6tCo8y#path=%252Foffice%252 ...

  9. jquery的ajax与spring mvc对接注意事项

    昨天一直纠结这么一个问题,应用场景是这样的: 这里登陆是通过jquery的ajax传输数据到后台controller类相应的映射mapping接收.本来是想,在后台验证成功之后返回一个视图modelA ...

  10. 使用OpenOffice实现各种文档转pdf或者html文档

    ---恢复内容开始--- 最近在做项目时需要写一个功能,将doc,ppt,xsl等文档做在线预览.网上查了很多资料,开始适用poi将文档转成pdf没成功,后来使用了OpenOffice4 + jodc ...