css 块级格式化上下文（BFC）

dazhifu 2019-06-28

一、块级格式化上下文（BFC）

1、什么是块级格式化上下文？

Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素 的渲染显示规则
  （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）

2、触发BFC的条件如下：

  • 根元素
  • float的值不为none。
  • overflow 除了 visible 以外的值（hidden，auto，scroll）
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • 绝对定位元素：position (absolute、fixed)
  • 弹性盒 flex boxes (元素的 display: flex 或 inline-flex)

3、BFC 的布局规则：

  • 内部的盒子会在垂直方向，一个个地放置；
  • BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
  • 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 ；
  • 计算BFC的高度时，浮动元素也参与计算
  • 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
  • BFC的区域不会与float重叠；

4、BFC特性

1.同一BFC下外边距会发生折叠：

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>外边距折叠</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:0 auto;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            margin:100px;
        }
        .btm2{
            width:100px;
            height:100px;
            background-color:red;
            margin:100px ;
        }
    </style>
    
</head>
<body>
    <div class="box">
    
        <div class="btm1">上下100margin</div>
        
        <div class="btm2">上下100margin</div>
    
    </div>
</body>
</html>

效果图：
css 块级格式化上下文（BFC）

第一个div的下边距和第二个div的上边距发声了重叠，所以两个盒子之间距离只有100px，而不是200px。

解决方法：

  • 放在不同的BFC下

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>外边距折叠</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            height:500px;
            margin:0 auto;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            margin:100px;
        }
        .btm2{
            width:100px;
            height:100px;
            background-color:red;
            margin:100px ;
        }
        .container{
            overflow: hidden;
        }
    </style>
    
</head>
<body>
    <div class="box">
        <div class="container">
            <div class="btm1">上下100margin</div>
        <div>
        <div class="container">
            <div class="btm2">上下100margin</div>
        <div>
    </div>
</body>
</html>

效果图：
css 块级格式化上下文（BFC）

这次我们可以清晰的看清两个中间是200px；并没用重叠。

2、BFC可以包含浮动的元素（清除浮动）

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
        
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            background-color:red;

        }
    
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>

        
            <div class="btm2"></div>
    
    </div>
</body>
</html>

效果图：css 块级格式化上下文（BFC）

由于容器内元素浮动，脱离了文档流，所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC，那么容器将会包裹着浮动元素。

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            background-color:red;

        }
    
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>

        
            <div class="btm2"></div>
    
    </div>
</body>
</html>

3、侵占浮动元素的问题

代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            width:300px;
            height:300px;
            background-color:red;
            
        }
        
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>
    

            
        
            <div class="btm2">
            
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！

            </div>

    
    </div>
</body>
</html>

效果图：
css 块级格式化上下文（BFC）

解决方法：
通过触发btm2的BFC解决
代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>高度塌陷</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:500px;
            overflow:hidden;
            margin:0 auto;
            border:1px solid green;
        }
        .btm1{
            width:100px;
            height:100px;
            background-color:orange;
            float:left;
        }
        .btm2{
            width:300px;
            height:300px;
            background-color:red;
            
        }
        .bb{
            overflow:hidden
        }
    </style>
    
</head>
<body>
    <div class="box">

            <div class="btm1">浮动</div>
    
    
        <div class="bb">
            
        
            <div class="btm2">
            
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！
            欢迎大家观看！

            </div>
        </div>
    
    </div>
</body>
</html>

效果图：
css 块级格式化上下文（BFC）

持续更新，欢迎大家指教！

dazhifu

dazhifu

相关推荐

css面试题汇总 （持续更新）

一个基本的盒模型，包括content，padding，border，margin

nicepainkiller / 0评论 2020-05-27

css 高度塌陷和外边距折叠问题详解，（BFC）

在浮动布局中，父元素的高度默认是被子元素撑开的，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！那么，兄弟元素div就会往上移动，破坏了页面结构

dazhifu / 0评论 2020-04-16

前端总结之CSS篇

块级格式化上下?的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。个 BFC的两个相邻 Box垂直排列。元素的 margin box 的左边， 与包含块 border box 的左边相接触(?字层不会被浮动层覆盖，

CaiKanXP / 0评论 2020-01-14

CSS 布局和 BFC

在一个Web页面的CSS渲染中，块级格式化上下文 是按照块级盒子布局的。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒都会垂直的沿着其父元素的边框排列。块格式化上下文的行为通过一个简单的float示例很容易理

impress / 0评论 2019-12-13

理解CSS布局和块格式化上下文

通常我们使用块级格式化上下文就能解决。块格式化上下文 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，并且容器元素不会影响兄

jianqi / 0评论 2019-11-19

css里的BFC用法

BFC，可以把BFC理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。能够看到父元素没有被撑开，BFC规则第四条：计算BFC的高度时，浮动元素也参与计算所以我们要将父元素触发BFC. 如果，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的

尚衍亮 / 0评论 2019-11-19

CSS里的BFC和IFC的用法

Block Formatting Contexts ，就是 一个块级元素 的渲染显示规则。②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。③.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也

huakaiwuxing / 0评论 2019-11-19

JS每日一题: 如何理解CSS中BFC?

20190416期如何理解CSS中BFC?BFC 特性及应用同一个 BFC 下外边距会发生折叠代码理解。如果使触发容器的 BFC，那么容器将会包裹着浮动元素

csscode / 0评论 2019-07-01

前端知识归纳

让浏览器的爬虫和机器很好地解析。a、在html标签自定义属性"data-xxx",js可以通过dataset设置"data-xxx"自定义属性。a、创建了BFC的元素中，在垂直方向上的margin会发生重叠。b、BF

nemunemu / 0评论 2019-07-01

css盒模型理解

css盒模型概念css盒子模型又称框模型 ，包含了元素内容、内边距、边框、外边距几个要素。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。css外边距合并(叠加)两个上下方向相邻的元素框

懵懂听风雨 / 0评论 2019-07-01

理解 CSS 布局和 BFC

CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助

lanzhusiyu / 0评论 2019-07-01

css 【实用】

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC布局规则：1、内部的Box会在垂直方向，一个接一个地放置。属于同一个BFC的两个相邻Box的margi

jianqi / 0评论 2019-07-01

前端_CSS

通过选择器来定位DOM的元素,将各种样式规则应用在元素上,改变元素在页面上的显示方式使用方式: 内联样式 + 内部样式 + 外部样式盒模型。标准盒模型 = content +border + padding +marginIE盒模型 = content +

NARUTOLUOLUO / 0评论 2019-06-30

CSS BFC特性(块级格式化上下文)

它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相互作用。5）bfc的高度计算时，浮动元素也参与计算。所以bfc会通过变窄来自适应，而不会与浮动元素发生重叠；

yaodilu / 0评论 2019-06-30

如何使用BFC清除CSS浮动以及解决margin合并的问题

元素的类型和display的属性决定了Box的类型。属于同一个BFC中的两个相邻的Box上下margin会发生叠加。计算BFC的高度时，浮动元素也参与计算。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

尚衍亮 / 0评论 2019-06-30

BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型

CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染。如果不特殊指定，浏览器会默认当前的HTML渲染是按文档流模式。盒模型是css渲染的时候抽象于html标签在画布所占有区域，由CSS引擎根据文档中的内容所创建。盒模型是有两种标准的，一个是

juzhengqian0 / 0评论 2019-06-30

CSS盒模型与BFC

盒模型分为两种：。标准盒模型IE盒模型1.2 两种盒模型的区别：1.标准盒模型的宽高为内容区域的宽高 2.IE盒模型则宽高为 border + padding + 内容区。1) block-level box:display 属性为 block, list

葉無聞 / 0评论 2019-06-29

前端面试常考知识点---CSS

CSS3圆角border-radius:属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径盒阴影box-shadow:语法：box-shadow: 水平方向的偏移量 垂直

dazhifu / 0评论 2019-06-29

CSS之BFC

对于很多初学者来说，CSS是不讲“道理”的，但是如果去深究，会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等，但还有一种FC规范经常会被排除在CSS规范的认知之外。“FC”可以简单的理解为浏览器对于

aSuncat / 0评论 2019-06-29

【CSS】BFC - 块级格式化上下文

BFC块级格式化上下文。如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动

juzhengqian0 / 0评论 2019-06-29

css中和模型及其相关的问题

什么是css和模型又称框模型 ，包含了元素内容、内边距、边框、外边距几个要素IE模型区别是宽度和高度不同，标准模型宽度和高度是content的高度，IE模型的宽度是border 和padding. css 如何设置这两种模型 box-sizing：con

ajhongshaorou / 0评论 2019-06-29

CSS8:到底什么是BFC？

现在有flex布局等新技术，bfc的效果比如包住元素，进行自适应布局等已经不需要了。现在只有免式的事后才需要知道BFC！浮动，绝对定位元素，非块盒的块容器和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文。同一个块格

zljiaa / 0评论 2019-06-28

学习CSS中的BFC

定义BFC全称为block formatting context，意为块级格式化上下文，是Web页面中盒模型布局的css渲染模式。可能上面的解释看了有点懵逼，通俗的说BFC指的的是一块区域的布局， 这个区域的布局有一个显著特点：这个区域内的子元素无论使用何

淡风wisdon大大 / 0评论 2019-06-28

深入理解css之BFC

BFC的定义BFC的全称是block formatting context，当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部元素的变化也不会影响到BFC内部元素，这就跟结界一样，你可以理解为有一个很强的护盾在包裹着BFC元素

ThikHome / 0评论 2019-06-28

css浮动现象及清除浮动的方法

首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕。再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，属于浮动布局。正是因为浮动的这

王为仁 / 0评论 2019-06-28

【css】常见问题

行内元素设置width,height无效。但是设置margin和padding是有效的。行内非替换元素的外边距不会改变一个元素的行高。-- 常见的块级元素 -->. 允许您以特定的方式定义匹配某个区域的特定元素。毗邻块盒子的垂直外边距折叠只有他们是在

LadyZhong / 0评论 2019-06-28

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

BFC的理解与应用首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详细，千万不要因为看到英文就畏惧不前。在BFC中，盒子从顶端开始垂直地一个接一个地排列，两

zuncle / 0评论 2016-08-01

《CSS世界》笔记四：流的保护与破坏

写在前面原本博客名为“浮动与定位”，但是《CSS世界》第六章节的内容不仅有浮动定位，很大一部分篇幅都在讲BFC和overflow。absolute和float可以看作是“同父异母”的兄弟关系。它们的父亲是同一个人，是CSS世界的大魔王，属于魔界;但母亲不是

yibawuqing / 0评论 2019-06-28

【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth

深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时候未觉详尽，便又去网上查阅了一番，扩充了其内

nicepainkiller / 0评论 2019-06-28

css里的BFC的用法

</html>运行结果 解析：1和2margin重叠了；为了让3不跟1，2一样只用在3上面加一个overflow: hidden。-- 文档流 从上到下,当遇到float、position：absolute时，会离开文档流 -->

LadyZhong / 0评论 2019-06-28

Css里的BFC

<2>解决浮动高度塌陷问题代码如下：

尚衍亮 / 0评论 2019-06-28

css布局基础总结

前端css布局知识繁杂，实现方式多种多样。想写出高效、合理的布局，必须以深厚的css基础为前提。为了方便记忆和复习，将css布局要点记录如下。内容较多，应用方面说的不太详细，但都是很实用的点。所谓布局，就是指将元素设置为我们想要的大小，放置于我们想要的位置

沉着前进 / 0评论 2019-06-28

十分钟复习CSS盒模型与BFC

css盒模型与BFC本文为收集整理总结网上资源旨在系统复习css盒模型与bfc节省复习时间阅读10分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子,它都会具有内容区、padding、border、margin.png). 使用box-sizi

AnyBisks / 0评论 2019-06-27

css布局的各种FC简单介绍：BFC，IFC，GFC，FFC

Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。BFC的约束规则内部的BOX会在垂直方向上一个接一个的放置；垂直方向上的距离由margin决定。IFC有的

wangnantjobj / 0评论 2019-06-27

块级格式化上下文(BFC)

具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。这种合并外边距

breezegao / 0评论 2019-06-27

CSS盒模型深入

CSS盒模型标准模型IE模型标准模型width表示content的宽度，IE模型width表示border+padding+content的宽度。边距重叠子元素的外边距会反应在父元素上，相邻元素外边距会取较大值，空元素上下外边距会取较大值。BFCBFC指块

k韶华 / 0评论 2019-06-27

关于CSS中设置overflow属性的值为hidden的相关理解

包裹元素剪裁条件是不是包裹元素overflow设置为hidden以后，内部元素如果超过包裹元素的话就会被剪裁？答案是不一定，这要看此刻的CSS环境。根据对CSS2.1规范的理解，可以这样表述：如果一个元素的包含块的overflow属性设置为hidden，那

yibawuqing / 0评论 2019-06-27

CSS margin合并问题

在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。必须是处于常规文档流的块级盒子，并且处于同一个BFC当中。相邻元素可以在其中一个元素外面包一层div，并设置任何能触发B

王为仁 / 0评论 2019-06-26

前端人人都应该理解的盒模型BFC渲染机制

前端人人都要懂的盒模型BFC渲染机制为什么我们说,前端工程师有必要需要了解BFC渲染机制?因为如果你一个前端压根没听说过BFC,那你是如何理解下面这几个css现象的呢?所以这里的问题是: 为什么2个div一起向下掉呢?如果你眼力不错,或者亲自试试,会发现2

inyiyi / 0评论 2019-06-26

BFC是什么

是W3CCSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。也

pangbianlaogu / 0评论 2013-12-21

CSS：BFC 最熟悉的陌生人

BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。BFC就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。

尚衍亮 / 0评论 2019-06-21

前端程序员需要掌握的几个专业“词语”

有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识，另一方面，在面试的时候也能够应对一些“爱问前端名词”的面试官~W3CW3C是World Wide W

RainyX / 0评论 2019-06-21

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少？有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈

inyiyi / 0评论 2019-06-21

新手小白必知的5道Web前端经典面试题

想成功就业web前端工程师，想要能高薪就业，那么除了好的web前端技能以外，还得有好的面试技巧，如果提前就了解更多企业的面试要求及面试题目，那么可以让我们的面试成功的几率大大的提高，今天就给大家分享5道经典的web前端面试题，相信可以祝大家一臂之力。在BF

元元 / 0评论 2018-11-22

前端程序员需要掌握的几个专业“词语”

有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。明确一下这些词语和概念没有什么不好~一方面能够让自己能够更专业的谈论知识，另一方面，在面试的时候也能够应对一些“爱问前端名词”的面试官~W3C是World Wide Web

tydanei / 0评论 2017-08-26

CSS盒模型的深度思考及BFC

本文最初发表于，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。CSS如何设置这两种模型？如果回答了上面的第二条，还会继续追问这一

辞客堂数位杂谈版 / 0评论 2018-03-06

CSS盒模型的深度思考及BFC

本文最初发表于，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。CSS如何设置这两种模型？如果回答了上面的第二条，还会继续追问这一

前端外刊评论 / 0评论 2018-03-06

CSS--理解块级格式上下文（BFC）

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干.Box垂直方向的距离由margin决定。计算BFC的高度时，浮动元素也参与计算4.BFC作用：用起来come

从零学习前端开发 / 0评论 2018-02-22

CSS基础知识（定位、浮动）

*多个元素均设置为浮动时，将自动排列。*兄弟元素，后一个元素设置为浮动，前一个元素不浮动，后一个元素的位置不能超过前一个元素的位置。结果: 父级的显示高度为 0. l BFC块极格式化环境。默认情况下BFC是关闭的，当元素开启BFC以后，将会具有如下特性：

前端外刊评论 / 0评论 2018-01-12