• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

你对BFC的理解

武飞扬头像
Didicode
帮助3

CSS中的BFC到底是什么?



前言

官方定义:BFC(Block Formatting Context)块格式化上下文, 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。


简单的理解:BFC就是一个块级容器,它会隔离外部,让盒子里面的元素不影响外面的元素,也就是在搭建页面的时候,不影响外面的布局。

一、为什么要知道BFC?

因为在页面的时候可能会发现,为什么会高度坍塌,为什么边距不是我想要的等系列问题。

  1. 如内部元素使用浮动的时候,外面的盒子计算不到高度,就会导致高度坍塌。学新通

  2. 如果两个块级盒子都设置了margin值,两个盒子相邻的那一边的margin会重叠,比如第一个盒子设置margin为10px,第二个盒子设置为20px,他们之间的边距不是30px,而是20px 学新通
    那么我们就需要使用BFC特性来解决这些问题

BFC特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠(重点)

2、计算BFC高度时浮动元素也参于计算(重点)

3、BFC的区域不会与浮动容器发生重叠(重点)

4、BFC内的容器在垂直方向依次排列

5、元素的margin-left与其包含块的border-left相接触

6、BFC是独立容器,容器内部元素不会影响容器外部元素

二、使用BFC解决问题

BFC的触发条件

  • 根元素,即HTML元素
  • 浮动元素:float值为left、right
  • overflow值不为 visible,为 auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • position的值为absolute或fixed

目前来说,最常见的是通过 overflow: hidden 来构建 BFC。一般情况下,它的副作用最小。但如果元素下有超出盒子范围的内容,会被截掉,请谨慎使用

1.解决边距重叠问题

出现第一个问题是因为处于同一个BFC下,我们只需要在其中一个块级元素外面包裹一层容器,使两个块级元素不属于同一层级,并且触发BFC(重点,因为不触发BFC,即使裹了容器,还是会发生重叠),这样该容器里面的元素就不会影响外面的元素,margin就不会发生重叠

代码如下(示例):

<style>
    .wrap {
        overflow: hidden;// 新的BFC
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 20px;
    }
</style>
<body>
    <p>Haha</p >
    <div class="wrap">
        <p>Hehe</p >
    </div>
</body>
学新通

2.解决高度坍塌问题

正常情况下,如果盒子里面的元素加了浮动,计算外面盒子的高度不会计算浮动的盒子高度,因为浮动不占空间。这个时候我们就需要在外面的盒子触发BFC,这样使他即使内部元素加了浮动也计算浮动元素的高度,不会导致高度坍塌
代码如下(示例):

<style>
  div {
        background-color: skyblue;
        margin: 20px;
        overflow: hidden;
    }
 .three {
        float: left;
        width: 200px;
        height: 200px;
        background-color: pink;
        color: purple;
        margin: 20px;
    }
</style>
<body>
    <div>33
        <p class="three">1</p>
    </div>
</body>
学新通

3.解决相邻盒子浮动区域重叠问题

因为加了浮动的盒子不占据空间,那么与其相邻的盒子就会与浮动的盒子重叠,为了解决这个问题,其实有两种方法

  1. 给相邻的盒子也加上浮动
  2. 给相邻的盒子设置overflow:hidden
    两者的区别在于,float对齐方式是,两个盒子的外边距对齐,overflow是内容对齐左盒子的顶部
<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
        overflow:hidden;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>
学新通

效果图如下

学新通
学新通


BFC常用功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题;

2、可以利用BFC解决高度塌陷问题;

3、可以利用BFC实现多栏布局(两栏、三栏、圣杯、双飞翼等)。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhffkabg
系列文章
更多 icon
同类精品
更多 icon
继续加载