2017-07-31读书笔记（bfc详解，带demo）

作者: shaocx | 来源:发表于2017-07-31 21:14 被阅读0次

2017-07-31读书笔记（bfc详解，带demo）
布局
我的布局实例
BFC 详解
BFC 详解
BFC详解
BFC详解
jQuery插件开发详解（带demo）
关于 runtime 优秀博文汇总
BFC应用详解

前两天听同事说起了他被困于bfc和ifc，听的当时满脸懵逼，在想这是什么怎么从来没听说过。于是今天准备好好地研究一下。

CSS2.1 中只有 BFC 和 IFC, CSS3中还增加了 GFC 和 FFC。

网上大概了解了一下bfc和ifc都是一些HTML、css结构的一些规范。与display的属性值有关。那还是先了解一下display的所有属性比较好。
w3school-css-display属性
在这之间我看到了好多之前并不清楚的属性值，常见的block、inline-block、inline、none等都不说了，主要是中间有几个table相关的之前不知道，害得我强行使用display: "" 来写。这样虽然是报错，但是叠加在原先的none上面至少会不生效，然后使display值还原成默认值。（这些都是小技巧，但是能分清的时候还是尽量分清比较好）

原文在这前端精选文摘：BFC 神奇背后的原理

在bfc中是有一些非常奇妙的现象的，比如说：

<!DOCTYPE html>
<html>
<head>
    <title>bfc</title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        .a {background: #eeeeee;width: 100%;height: 400px;}
        .a div {
            width: 200px;
            height: 50px;
        }
        .a1 {
            background-color: red;
            margin-bottom: 20px;
        }
        .a2 {
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
</div>
</body>
</html>

效果

在这段代码中，无论你是否注释掉a1的margin-bottom或者a2的margin-top都不会改变两者的间距。

还有一个也是非常有名的，经常会出现在面试题中的一个问题，为什么overflow:hidden可以消除float的影响。代码实例如下:

<!DOCTYPE html>
<html>
<head>
    <title>bfc</title>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        .a {
            background-color: #eee;
        }
        .a1 {
            width: 200px;
            height: 100px;
            float: left;
            background-color: #aaa;
        }
        .a2 {
            width: 200px;
            height: 100px;
            float: left;
            background-color: #2dc3e8;
        }
    </style>
</head>
<body>
<div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
</div>
</body>
</html>

结果如下：