概述

BFC是块级格式化上下文,它的一个令人熟知的运用是双飞翼布局或者两列布局。但其实它在其它地方也有很巧妙的运用。我把研究的心得记录下来,供以后开发时参考,相信对其他人也有用。

参考资料:

mdn块格式化上下文

为什么BFC可以解决margin叠加问题?

BFC——一个我们容易忽视掉的布局神器

BFC精髓

触发BFC的元素会变成一个独立的盒子,这个独立盒子里的布局不受外部影响也不会影响到外面的元素!这就是BFC的精髓所在!

常用的触发BFC的方法:

  1. 设置除 float:none 以外的属性值(如:left | right)。
  2. 设置除 overflow: visible 以外的属性值(如: hidden | auto | scroll)。
  3. 设置 display属性值为: inline-block。
  4. 设置 position 属性值为:absolute | fixed。

解决margin叠加问题

如下面的代码所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
margin-bottom: 150px;
width: 200px;
height: 200px;
background-color: green;
}
.div2 {
margin-top: 100px;
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

两个块级元素div1和div2会发生上下边距重叠的情况。但是如果我们把div的display改为inline-block,就不会发生上下边距重叠了。代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
margin-bottom: 150px;
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
.div2 {
margin-top: 100px;
width: 200px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

其实严格说来,并不是由于display: inline-block;触发了BFC从而使上下边距不叠加的,因为BFC的精髓是:触发BFC的元素会变成一个独立的盒子,这个独立盒子里的布局不受外部影响,也不会影响到外面的元素!而div1的margin-bottom不能算是盒子内部的布局

那是什么原因导致上下边距不叠加的?

因为W3C官方文档规定,上下边距叠加必须满足2个条件:一个是都是块级元素;另一个是都在同一个BFC里面。参见:w3.org关于margin合并的规范说明

所以我们把div1设置为inline-block之后,它就不是块级元素了,不满足条件1,自然就不会发生上下边距叠加。

解决margin影响父元素问题

我们给父元素的第一个子元素设置margin-top值,就会发现它影响到了父元素的margin值,原因是它和父元素的margin-top值合并了。实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: green;
}
.div2 {
margin-top: 100px;
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>

我们一般是通过设置父元素的padding-top值为1px来解决的。但是利用BFC有更加简便的解决方法,那就是利用overflow: hidden或者overflow: auto,使父元素形成一个BFC,从而它里面的元素不受外面的元素影响,也不会影响外面的元素。实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: green;
overflow: auto;
}
.div2 {
margin-top: 100px;
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>

清除浮动

如下面代码所示,如果我们给子元素加一个浮动,那么子元素就不能撑开父元素了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
width: 200px;
background-color: green;
border: 5px solid red;
}
.div2 {
float: left;
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>

原因是,子元素通过float触发BFC,成为了一个独立的盒子,根据BFC的精髓,它不会影响外部元素,也不会受外部元素影响,所以它不会影响父元素的高度,所以不能撑开父元素

这个时候,如果给父元素触发BFC,就可以强制把子元素拉到它形成的独立盒子里面(在计算BFC的高度时,浮动元素也参与计算),这样就清除浮动了。而触发BFC最好用的还是overflow: hidden或者overflow: auto。实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 {
width: 200px;
background-color: green;
border: 5px solid red;
overflow: auto;
}
.div2 {
float: left;
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>

其它

我们在写css的时候,有时会遇到莫名其妙的问题,这个时候可以考虑给元素加一个overflow: hidden或者overflow: auto,使元素触发BFC成为独立盒子,往往能意想不到的解决问题呢!

你可能不知道的BFC在实际中的应用的更多相关文章

  1. 你所不知道的html5与html中的那些事第三篇

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...

  2. 你所不知道的html5与html中的那些事(三)

    文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...

  3. 你所不知道的html5与html中的那些事(五)——web图像

    文章简介:       现在的页面,一般都离不开图像,而怎么做才能让我们的页面中的图像加载的又快又好呢?在优化页面速度的时候还有什么事是你所不知道的呢?     下面看看今天我为大家带来了哪些关于we ...

  4. 你所不知道的html5与html中的那些事(四)——文本标签

    文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后 ...

  5. Android中Context详解 ---- 你所不知道的Context

    转自:http://blog.csdn.net/qinjuning/article/details/7310620Android中Context详解 ---- 你所不知道的Context 大家好,  ...

  6. JavaScript中你可能不知道的九件事

    今天凑巧去W3School扫了一遍JavaScript教程,发现从中看到了不少自己曾经没有注意过的细节. 我这些细节列在这里.分享给可能相同不知道的朋友: 1.使用 document.write() ...

  7. JavaScript中你所不知道的Object(二)--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  8. Spring中你可能不知道的事(一)

    Spring作为Java的王牌开源项目,相信大家都用过,但是可能大家仅仅用到了Spring最常用的功能,Spring实在是庞大了,很多功能可能一辈子都不会用到,今天我就罗列下Spring中你可能不知道 ...

  9. [No0000194]聊聊 Chrome DevTools 中你可能不知道的调试技巧

    对于前端开发者来说,ChromeDevTools 绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而ChromeDevTools 其实很强大,下面来聊聊一些你可能不知道的debu ...

随机推荐

  1. 编程语言的分类及其优缺点,Python标准输入与输出

    一. 编程语言分类 1.机器语言 以0,1的组合作为指令集,用二进制指令来编写程序: 优点:执行效率高 缺点:开发效率低 2.汇编语言 用英文标签代替二进制指令集来编写程序,比机器语言稍微高级,但本质 ...

  2. php 获取数组深度的key

    1.数组 深度遍历 function fun($a,&$b) { foreach ($a as $k=>$val) { if (is_array($val)) { $b[]=$k; fu ...

  3. 算法练习LeetCode初级算法之数组

    删除数组中的重复项 官方解答: 旋转数组 存在重复元素 只出现一次的数     官方解答:  同一个字符进行两次异或运算就会回到原来的值 两个数组的交集 II import java.util.Arr ...

  4. MAC book 无法删除普通用户的解决办法

    1来自苹果官网 macOS Sierra: 删除用户或群组 如果您是管理员,当您不想再让某些用户访问 Mac 时,可以删除他们.您也可以删除不想要的群组. 删除用户时,您可以存储该用户的个人文件夹(包 ...

  5. Linux下Mysql安装(tar安装)

    1.为数据库创建软件目录以及数据存放目录 #mysql软件目录 mkdir /software/ #mysql数据文件目录 mkdir /data/mysql 2.上传mysql-XXXXXX.tar ...

  6. eclipse 如何安装freemaker ftl 插件

    借鉴原链接   https://blog.csdn.net/lsygood/article/details/80565933 在线安装的方法是:Help –> Install New Softw ...

  7. stark组件开发之编辑功能实现

    编辑功能.和添加一样! 唯一不同的就是, 需要编辑一个指定的  记录.这就需要,在列表页面, 渲染编辑的时候,添加一个 id 值: class UserInfoHandler(StartHandler ...

  8. 编辑linux内核与bosybox 时,make menuconfig 出现错误

    *** Unable to find the ncurses libraries or the *** required header files. *** 'make menuconfig' req ...

  9. Linux Curl命令

    一.简介 linux curl是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称url为下载工具.   二.安装 wget http://c ...

  10. ORM初识和数据库操作

    ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使用描述对象和数据库之 ...