浅谈BFC

一、CSS定位机制

普通流

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
浮动（float）

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
绝对定位（position absolut）

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

二、BFC

BFC定义：

    BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

元素触发BFC：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

三、BFC的应用

避免BFC导致块级元素margin重叠

<style>
        div{
            overflow: hidden;
        }
        p{
            width: 100px;
            height: 100px;
            margin: 100px;
            background: skyblue;
        }
</style>
<body>
    <div><p></p></div>
    <div><p></p></div>
</body>

如果不给div元素设置overflow:hidden的话，将会导致两个同处于一个BFC容器下，然后会使他们的外边距重叠

2. BFC实现栏自适应布局

<style>
    body{
        width:100%;
    }
    .div1{
        float: left;
        width: 100px;
        height: 100px;
        background-color: #87CEEB;
    }
    .div2{
        width: 80%;
        height: 100px;
        background-color: #2c3e50;
        overflow: hidden;
    }
</style>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>

这个实现了左侧固定宽度右侧自适应布局。
3. 清楚内部浮动

<style>
    .div1{
        border: 1rem solid #87ceed;
        overflow: hidden;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: #2c3e50;
        float: left;
    }
</style>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>

这个解决了因为浮动元素导致父级div塌陷问题。

四、引申

清楚浮动的几种方式：

父级div定义height

原理：直接给父级div定义高度就解决了因为浮动元素导致的父级div高度无法自动获取高度的问题
优点：代码量少，简单书写
缺点：固定了父级div 的高度
结尾处加空div设置style为clear:both

原理：利用css中的clear:both来清除浮动，让父级div能自动获取高度
优点：简单，而且没有固定父级div的高度
缺点：设定过多的空div，使代码结构过于混乱
父级div定义伪类:after 和 zoom

原理：和2类似，可解决低版本IE的浮动问题
优点：大多浏览器都支持
缺点：代码多，原理难以理解
父级div定义 overflow:hidden

原理：浏览器会自动浮动检查高度
优点：简单，大多浏览器都支持
缺点：超出部分会被隐藏
父级div定义 overflow:auto

原理：和4相同
优点：简单，大多浏览器都支持
缺点：超出部分会增加滚动条

6.父级div 也一起浮动

原理：所有代码一起浮动，就变成了一个整体
优点：无
缺点：产生新的浮动问题

一、CSS定位机制

二、BFC

BFC定义：

BFC布局规则：

元素触发BFC：

三、BFC的应用

四、引申

清楚浮动的几种方式：

猜你喜欢