css基础知识六:谈谈你对BFC的理解?

news2024/11/8 21:52:42

在这里插入图片描述
一、是什么

我们在页面布局的时候,经常出现以下情况:

  • 这个元素高度怎么没了?
  • 这两栏布局怎么没法自适应?
  • 这两个元素的间距怎么有点奇怪的样子?

归根究底是元素之间相互的影响,导致了意料之外的情况,这里就涉及到BFC概念

BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则:

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。
  • 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时,浮动子元素也参与计算
  • 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

三、应用场景

利用BFC的特性,我们将BFC应用在以下场景:

防止margin重叠(塌陷)

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

页面显示如下:
在这里插入图片描述
两个p元素之间的距离为100px,发生了margin重叠(塌陷),以最大的为准,如果第一个P的margin为80的话,两个P之间的距离还是100,以最大的为准。

前面讲到,同一个BFC的俩个相邻的盒子的margin会发生重叠

可以在p外面包裹一层容器,并触发这个容器生成一个BFC,那么两个p就不属于同一个BFC,则不会出现margin重叠

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

这时候,边距则不会重叠:
在这里插入图片描述
清除内部浮动

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

页面显示如下:
在这里插入图片描述
而BFC在计算高度时,浮动元素也会参与,所以我们可以触发.par元素生活才能BFC,则内部浮动元素计算高度时候也会计算

.par {
    overflow: hidden;
}

实现效果如下:
在这里插入图片描述
自适应多栏布局

这里举个两栏的布局

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果图如下:
在这里插入图片描述
前面讲到,每个元素的左外边距与包含块的左边界相接触

因此,虽然.aslide为浮动元素,但是main的左边依然会与包含块的左边相接触

而BFC的区域不会与浮动盒子重叠

所以我们可以通过触发main生成BFC,以此适应两栏布局

.main {
overflow: hidden;
}

这时候,新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度,和.aside的宽度,自动变窄

效果如下:
在这里插入图片描述
小结

可以看到上面几个案例,都体现了BFC实际就是页面一个独立的容器,里面的子元素不影响外面的元素

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/671859.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

5个可以白嫖PPT模板的网站,不允许你们不知道

本期分享5个超好用的免费PPT模板网站&#xff0c;真的免费&#xff0c;建议收藏&#xff01; 菜鸟图库 https://www.sucai999.com/search/ppt/0_0_0_1.html?vNTYwNDUx 菜鸟图库网有非常丰富的免费素材&#xff0c;像设计类、办公类、自媒体类等素材都很丰富。PPT模板种类很多…

Linux文件基础IO的理解1

目录 一.Linux中文件的特性 二.C语言部分库文件相关函数 2.1在C语言的文件底层原理中&#xff1a; 2.打开与关闭函数 fopen&#xff1a;打开文件函数 2.1参数理解&#xff1a; fclose&#xff1a;关闭文件函数 实验案例&#xff1a; w方式&#xff1a; r方式的案例&…

华为OD机试之 阿里巴巴找黄金宝箱(V)(Java源码)

文章目录 阿里巴巴找黄金宝箱(V)题目描述输入描述输出描述示例代码 阿里巴巴找黄金宝箱(V) 题目描述 一贫如洗的樵夫阿里巴巴在去砍柴的路上&#xff0c;无意中发现了强盗集团的藏宝地&#xff0c;藏宝地有编号从0~N的箱子&#xff0c;每个箱子上面贴有一个数字。 阿里巴巴念…

【好书精读】网络是怎样连接的 之 客户端与服务器之间是如何收发数据

&#xff08; 该图由AI制作 学习AI绘图 &#xff09; 目录 将 HTTP 请求消息交给协议栈 对较大的数据进行拆分 使用 ACK 号确认网络包已收到 根据网络包平均往返时间调整 ACK 号等待时间 返回 ACK 号的等待时间&#xff08;这个等待时间叫超时时间&#xff09; 使用窗口…

GreasyFork+Github

GreasyForkGithub 好长时间没用 GreasyFork 了&#xff0c;最近在刷 Spring Boot 的各种知识点&#xff0c;其中很大时间都在学习 baeldung.com 这个站点。不知道是因为最近刷的勤了还是怎么的&#xff0c;这个网站经常会弹出一个“让我关闭广告阻拦插件”的提示框&#xff0c…

CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)

简述&#xff1a;Cesium是一种基于WebGL开源的虚拟地球技术&#xff0c;可以用于构建高性能、跨平台的三维地球应用程序&#xff0c;它支持多种数据格式和地图服务&#xff0c;可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件&#…

K 个一组翻转链表(leetcode 25)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路思路复杂度分析 5.实现示例参考文献 1.问题描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不…

Linux->线程互斥

目录 前言&#xff1a; 1 线程互斥 1.1 多线程并发问题 1.2 线程锁 1.3 锁的接口 2 线程安全与可重入函数 3 死锁 前言&#xff1a; 本篇文章主要讲解了线程互斥的实现方式&#xff0c;还有原理&#xff0c;并附上代码讲解。并且讲解了锁的概念&#xff0c;问题等。 1 线…

C++进阶—继承(上)简单特性

目录 1.继承的概念及定义 1.1继承的概念 1.2 继承定义 1.2.1定义格式 1.2.2继承关系和访问限定符 1.2.3继承基类成员访问方式的变化 2.基类和派生类对象赋值转换 3.继承中的作用域 4.派生类的默认成员函数 5.继承与友元 6. 继承与静态成员 1.继承的概念及定义 1.1继承…

OpenSSL生成SSL证书,受浏览器信任吗?

OpenSSL是用于传输层安全(TLS)协议的开源工具包&#xff0c;OpenSSL生成SSL证书能受到浏览器信任吗&#xff1f;OpenSSL生成SSL证书能不能用于网站HTTPS加密呢&#xff1f; OpenSSL是什么&#xff1f; OpenSSL是基于密码学的用于传输层安全(TLS)协议的开源工具包&#xff0c;可…

【U8+】取消用友U8软件登录界面记住密码功能

【需求描述】 由于用友U8结合远程软件使用&#xff0c; 并且为了简化操作&#xff0c;远程用户建立一个公用账户&#xff0c; 所有的U8用户都使用同一个远程用户登录&#xff0c; 但是各自有U8的账号&#xff0c;登录账套的时候&#xff0c;有操作员记录密码后&#xff0c;别的…

Springboot 核心注解和基本配置解读

目录 1. Springboot 入门与原理 1.1 Springboot 简介 1.1.1 什么是Springboot 1.1.2 Springboot 主要优点 1.2 Springboot 相关注解 1.2.1 元注解 1.2.1.1 Target 1.2.1.2 Retention 1.2.2 Configuration 1.2.3 Import 1.2.3.1 直接注入 1.2.3.2 实现 ImportSelector…

Python基础语法2(超详细举例)

生活就是这样&#xff0c;有的时候即便你尽了最大努力&#xff0c;但依然无法得偿所愿 但是&#xff0c;难道向上攀爬的那条路不是比站在顶峰更令人热血澎湃吗&#xff1f; 文章目录 一、转义符 二、变量的赋值规则 三、数据类型 四、操作符 1.除法 2.幂运算 3.布尔运算…

读营销策划心得

读营销策划心得篇1 过去的一年可算是我工作上另一个转折点&#xff0c;更是一个新的开始。特别是自今年6月份接手营销策划工作&#xff0c;不知不觉&#xff0c;已有半年。回忆这一年的工作经历&#xff0c;有艰辛、有成长、有收获、更有前景。这一年既包含了太多的艰辛与不易&…

Redis【入门篇】---- 初始 Redis

Redis【入门篇】---- 初始 Redis 1. 认识NoSQL1. 结构化与非结构化2. 关联与非关联3. 查询方式4. 事务5. 总结 2. 认识Redis3. 安装Redis1. 依赖库2. 上传安装包并解压3. 启动4. 默认启动5. 指定配置启动6. 开机自启动 4. Redis桌面客户端1. Redis命令行客户端2. 图形化桌面客户…

2023年最新企业网盘排名!一文掌握各大企业网盘优缺点

近年来&#xff0c;企业网盘已经成为一个越来越流行的工具&#xff0c;为企业寻求简化他们的文件协作过程。由于团队成员分散在不同的位置和设备上&#xff0c;网盘提供了一种安全有效的方式来存储、共享和协作文件&#xff0c;为企业提供了一系列的好处&#xff0c;包括&#…

赚钱的底层模式和破局思路

赚钱的逻辑是什么&#xff0c;哪些价值观念的区别&#xff0c;让不同人在赚钱这件事情上产生巨大的差别&#xff1f; 如果从第一性原理出发&#xff0c;个体赚钱有哪些模式&#xff0c;以及如何优化&#xff1f; 一、出卖时间 本质上所有的赚钱方式都是出卖时间&#xff0c;…

车载开发中,蓝牙通信需要学习那些核心技术点?

车载蓝牙通信是指在汽车内部或车辆与外部设备之间使用蓝牙技术进行数据传输和通信。蓝牙5.0是现代蓝牙技术的最新版本&#xff0c;它引入了一系列新功能和改进&#xff0c;提供了更快的数据传输速度、更长的传输距离、更稳定的连接和更低的能耗。 那么车载蓝牙通信需要学习那些…

RabbitMQ实现延时消息的两种方法

RabbitMQ实现延时消息的两种方法 1、死信队列 1.1消息什么时候变为死信(dead-letter) 消息被否定接收&#xff0c;消费者使用basic.reject 或者 basic.nack并且requeue 重回队列属性设为false。消息在队列里得时间超过了该消息设置的过期时间&#xff08;TTL&#xff09;。消…

java 设计模式--创建者模式

参考&#xff1a;Java常见设计模式总结 概念 概念理解一&#xff1a;将复杂对象的创建过程分解在不同的方法中&#xff0c;不同的创建过程组装成不同对象。对象的创建与产品本身分离开&#xff0c;使得对象的创建过程更加清晰。例如&#xff1a;旅游套餐售卖场景。 一个套餐大…