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. SSE 系列内置函数中的 shuffle 函数

    SSE 系列内置函数中的 shuffle 函数 邮箱: quarrying@qq.com 博客: http://www.cnblogs.com/quarryman/ 发布时间: 2017年04月18日 ...

  2. 用C写一个web服务器（三） Linux下用GCC进行项目编译

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  3. oh-my-zsh 安装和使用

    oh-my-zsh是github用户robbyrussell的一款为简化zsh配置而开发的开源项目. 其github地址:https://github.com/robbyrussell/oh-my-z ...

  4. time模块简介

    Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...

  5. 使用虚拟机CentOS7部署CEPH集群

    第1章   CEPH部署 1.1  简单介绍 Ceph的部署模式下主要包含以下几个类型的节点 Ø CephOSDs: A Ceph OSD 进程主要用来存储数据,处理数据的replication,恢复 ...

  6. JavaScriptCore全面解析 （下篇）

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 殷源,专注移动客户端开发,微软Imagine Cup中国区特等奖获得者,现就职于腾讯. 接JavaScript ...

  7. vue的Virtual Dom实现- snabbdom解密

    vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...

  8. 解决初次使用webpack+antd-mobile时css不生效的问题

    前端这块,最火的是angular.react.vue.根据你具体的业务场景,选择合适的框架或者类库.以react为例,新建一个项目时, css组件按钮,图片轮播等组件,最好不要重复造轮子,选择业内规范 ...

  9. AspNetCore-MVC实战系列（四）之结尾

    AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...

  10. node.js—express+ejs、express+swig、

    安装:npm install -g express-generator 普通express 网站 创建:express testWeb 安装依赖:npm install 修改app.js文件并运行 找 ...