BFC:块级格式上下文详解

栏目: Html · 发布时间: 5年前

内容简介:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,它规定了内部如何布局,是决定块盒子的布局及浮动相互影响范围的一个区域,并且与这个区域外部毫不相干。

1.BFC简要定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,它规定了内部如何布局,是决定块盒子的布局及浮动相互影响范围的一个区域,并且与这个区域外部毫不相干。

2.BFC创建方式

  • 根元素或其它包含它的元素;
  • 浮动 (元素的float不为none);
  • 绝对定位元素 (元素的position为absolute或fixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 表格单元格(元素的display: table-cell,HTML表格单元格默认属性);
  • overflow的值不为visible的元素;
  • 弹性盒 flex boxes (元素的display: flex或inline-flex)

3.BFC内部特性

  • 内部的盒会在垂直方向一个接一个排列(可以看作BFC中有一个的常规流);
  • 处于同一个BFC中的元素相互影响,可能会发生margin collapse;但不同BFC可以阻止margin collapse
  • 每个元素的margin box的左边,与容器块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此;
  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然;
  • 计算BFC的高度时,考虑BFC所包含的所有元素,连浮动元素也参与计算;
  • 浮动盒区域不叠加到BFC上;

4.BFC应用实例

1.BFC清除浮动

将父元素设置一个能让其变为BFC区域的属性,不如overflow:auto

BFC:块级格式上下文详解

BFC:块级格式上下文详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            background:green;
            width: 100px;
            height: 50px;
            float: left;
        }
        #two{
            background: red;
            width: 200px;
            height: 50px;
            float: left;
        }
        #box{
            border: 2px solid salmon;
            width: 400px;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="one">one</div>
    <div id="two">two</div>
</div>

</body>
</html>

2.BFC处理margin collapse

在CSS中,两个或多个毗邻的普通流中的盒子(可能是父子元素,也可能是兄弟元素)在垂直方向上的外边距会发生叠加,这种形成的外边距称之为外边距叠加。这里讲解父子元素,兄弟元素同理。

BFC:块级格式上下文详解 BFC:块级格式上下文详解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        p{
            padding: 0;
            margin: 20px 0 20px 0;
            height: 20px;
            background-color: burlywood;
            color: #fff;
        }
        div{
            overflow: auto;//前后的区别取决于这句话,加上就能让父级生成BFC区域包含它们
            width: 250px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div>
    <p>aaaaaaaaaaaaaa</p>
    <p>bbbbbbbbbbbbbb</p>
</div>

</body>
</html>

BFC改造后

BFC:块级格式上下文详解


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法技术手册

算法技术手册

[美]海涅曼 (Heineman.G.T.)、[美]波利切 (Pollice.G.)、[美]塞克欧 (Selkow.S.) / 东南大学出版社 / 2009-4 / 58.00元

创造稳定的软件需要有效的算法,但是程序设计者们很少能在问题出现之前就想到。《算法技术手册(影印版)》描述了现有的可以解决多种问题的算法,并且能够帮助你根据需求选择并实现正确的算法——只需要一定的数学知识即可理解并分析算法执行。相对于理论来说,本书更注重实际运用,书中提供了多种程序语言中可用的有效代码解决方案,可轻而易举地适合一个特定的项目。有了这本书,你可以: 解决特定编码问题或改进现有解决......一起来看看 《算法技术手册》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具