其实在一开始我是没有BFC的这个概念的,只是知道在浮动过后,后续的元素如果出现问题,就做我们常说的:overflow:hidden.其中的原因还是不甚了解.不是说以前老师没有讲解过,而是以前根本就没有理解很深,就知道用.在这个星期白老师又重新给我们讲解了一遍,虽说不是非常系统,但是讲解的非常简单易懂.

　　那么那些情况我们会遇到问题,那我们怎么用BFC解决呢?

　　首先我们需要了解什么是BFC,BFC就是常说的 "Block Formatting Context",就是"块级格式化上下文",什么意思你可能会问.具体的什么意思我也不是很理解,就是把一个区域单独的隔离出来,里面的子元素和外面的元素互不影响.

　　好了,我们还是来看看哪些情况我们需要用到BFC,一般说来,下面的四种情况会形成BFC:

  • float：left|right
  • position：absolute|fixed
  • display: table-cell|table-caption|inline-block
  • overflow: hidden|scroll|auto

　　1.在浮动的时候遇到的问题,我们未设置父元素的高度,而在其子元素浮动的时候,会造成父元素塌陷.

　　

　　非常尴尬,但是我们可以用overflow:hidden来解决,当然我们也可以设置父元素的高度;

　　2.边距折叠的问题:

　　比如我们在平常经常会设置一个div,然后再包裹一个div,机智的你可能会发现,设置子元素的margin-top,父元素会跟着移动,以前的我理解为浏览器把两个div的上边框看成一个边框了,所以里面动,外面也跟着动,一般我的解决办法是:父元素padding:1px,但时这样会造成一定的布局变形.当然我们形成一个BFC就能完美的解决问题:overflow:hidden;还有就是,两个同级的div在上一个div设置margin-bottom:50px,而设置下一个div的margin-top:60px;机智的你又会发现:他们之间的间距并不是50+60=110,奇了怪了,再看看的确不是啊,在量量60px,这就是我们所说的边距折叠的问题,简单地方法就是在这两个div的外面在套一个div,设置overfl:hidden就解决了,注意我们所说的形成BFC,指的是其内部的每个子元素,而不是其本身,所以我们要在他的外面去套div的原因.

　　平时我们所遇到的大部分情况如上所示,当然还有很多其他情况,由于我们(我)用的比较少,就不一一列粗来了.通过以上的栗子我们可以看出:BFC的作用还是大大的,可以解决我们平时觉得匪夷所思的问题,当然除了BFC还有IFC,GFC,FFC,大家若是有兴趣可以参考张鑫旭大大的文章.

布局复习---BFC的更多相关文章

  1. CSS布局基础——BFC

    what's BFC? 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使 ...

  2. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  3. 页面布局之BFC 微微有点坑

    一.什么是BFC: 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说 ...

  4. 样式布局与 BFC

    一.几类视图 内联视图:inline 单行 块级视图:block 换行,有高度 行内块级视图:inline-block 单行,有高度 二.几类布局 块级布局 换行,通过设置 margin 水平居中 & ...

  5. 布局之BFC

    BFC 什么是BFC,在哪里需要用到BFC,BFC有什么规则?生成BFC有什么条件?这几个问题,我将为大家一一解释,下面我们进入正题. BFC(Block formatting context)直译为 ...

  6. 分析CSS布局中BFC

    1.什么是BFC BFC(Block Formatting Context,块级元素格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和 ...

  7. CSS布局基础--BFC

    1,什么是BFC BFC(Block Formatting Context)块级格式化上下文,它就是一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其他环境中的布局. ...

  8. CSS布局之BFC和IFC

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...

  9. CSS 布局和 BFC

    什么是 BFC 在一个Web页面的CSS渲染中,块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的.W3C对BFC的定义如下:浮动元素和绝对定位元素,非块级盒子 ...

随机推荐

  1. sql练习03

    准备数据建表语句CREATE TABLE students(sno VARCHAR(3) NOT NULL, sname VARCHAR(4) NOT NULL,ssex VARCHAR(2) NOT ...

  2. A*算法实现（图形化表示）——C++描述

    概要 A*算法是一种启发式寻路算法,BFS是一种盲目的无目标的搜索算法,相比于BFS,A*算法根据适应度构建优先队列,根据适应度值可以很好的向目标点移动,具体详情,请看搜索相关文档,我在只是实现了在无 ...

  3. NFS原理

    1.什么是NFS? 全称 network file system 网络文件系统 通过网络存储和组织文件的一种方法或机制. 什么是文件系统? 2.为什么要用共享存储? 前端所有的应用服务器接收到用户上传 ...

  4. linux学习：【第1篇】之安装vmware+Centos 6.9

    vmware+CentOs 6.9的安装步骤 一.安装步骤 linux分区 登录用户名和密码 登录用户名和密码后安装成功 二.远程控制Xshell的安装

  5. 关于数字加载的动画 jquery

    这是关于数字加载的一个动画,从0开始变化到设置的数字,依赖于jquery,效果如下所示 当然,数字要显示的位数是可以设置的,默认是全部位数的数字,设置显示位数可以直接传递参数,例如: html文件为: ...

  6. Oracle数据库查询优化方案

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  7. 第二篇【Zabbix客户端的完整布署】

    关于Zabbix服务端布署请查看 1.上传zabbix安装包(源码包默认(Server和Agent是一起的)) [root@sms-v2 ~]# ll /root/ -rw-r--r-- root r ...

  8. 数组遍历 forEach 方法

    数组的遍历 遍历数组,将数组中的所有元素都取出来. 使用for 循环执行数组的索引(length-1)相同的次数. var arr=["1", "5", &qu ...

  9. js 循环post

    var url_s=["h/a","h/b","h/c"]; function post_test(url,callback) { //请求 ...

  10. OpenCV笔记（2）(高斯平滑、腐蚀和膨胀、开闭运算、礼帽和黑帽、Sobel及其他算子)

    一.高斯平滑(模糊) def gaussian_blur(image): # 设置ksize来确定模糊效果 img = cv.GaussianBlur(image, (5, 5), 0) cv.ims ...