程序员经验分享-hwhale

HTML BFC的理解与作用

2023-11-15

HTML BFC的理解与作用

含义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。理解来说：就是一个块级元素参与的独立块级渲染区域

一、如何创建一个BFC、形成BFC必须具备的条件

1、具备以下其一即可形成BFC

​ 1、float 不为 none

​ 2、position值为 absolute、fixed

​ 3、display 为 inline-block、table-cells、flex、block、table-caption

​ 4、overflow不为visible、clip的块元素

​ 5、body 根元素

2、以上形成BFC最好的办法

​ overflow：hidden

​ 因为不影响整体布局

二、BFC作用

1、独立性避免了margin塌陷（解决外边距合并问题）

2、阻止浮动元素覆盖

3、解决子元素浮动时、父元素高度塌陷问题

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript

html

css

前端

HTML BFC的理解与作用 的相关文章

  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB

  • 如何向 CSS 形状添加偏移轮廓？

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2

  • HTML5

    我想在随机位置开始和停止 HTML5 播放 并具有淡入和淡出周期 以平滑聆听体验 为此存在什么样的机制 使用 setTimeout 手动增加音量 jQuery 的方式 audio animate volume newVolume 1000

  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis

  • Angular JS 中的数组

    我是 Angular JS 新手 我正在将元素推送到数组中 然后想使用 ng repeat 在 html 中显示 scope groupedMedia Adding elements through a for loop scope gro

  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo

  • 如何使用 HTML 5 实现类似 gmail 的文件上传/附件

    我记得一些支持 Ajax 之类的选项 无回发世界 文件上传 隐藏的 iframe 使用 flash 对象 尽管我仍然好奇为什么使用 SWF 以及它提供什么优势 然而 通过查看博客 HTML 5 似乎很有前途 我尝试了一些小示例 它确实有效

  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作？

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则

  • 更改API数据输出的布局

    我是 API 集成和 PHP 的新手 我最近将 VIN 解码器集成到我的应用程序中 在输入框中输入车辆的 VIN 选择提交 然后就会显示 API 数据库中有关该车辆的所有信息 数据存储为关联数组 其中包含类别及其相应元素 例如 对于 VIN

  • CSS 显示无不工作

    media screen and min width 900px and max width 1215px menu display none 这不起作用 div 仍然可见 但是 如果我将 div 更改为 div class menu 代替

  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale

  • 电话输入自动填充会删除国际前缀

    我有一个类型为 tel 的输入字段 并启用了自动完成功能

  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会

  • 适用于移动设备的响应式订单确认电子邮件？

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理

  • 将特定字形与网络字体一起使用

    使用网络字体 我想使用字体功能设置 CSS 中的选项以及跨度类HTML 中 以便使用字体集中的特定替代字形 我需要以正确的语法使用哪些值 GID Unicode 才能定位特定的目标glyph内glyph备择方案 这些功能使用 OpenTyp

  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code

  • Service Worker 与 Shared Worker

    Service Worker 和 Shared Worker 有什么区别 我什么时候应该使用 Service Worker 而不是 Shared Worker 反之亦然 Service Worker 具有共享 Worker 之外的附加功能

  • 我可以使用 ASP.NET WebForms 母版页在每个内容页中包含不同的 javascript/css 文件吗？

    我有几个使用相同母版页的内容页 它们并不都需要包含在相同的 javascript 和 css 文件中 tag 是否可以更改内容来自内容页面的标签 确实如此 但我建议采取一些不同的做法 我在关闭正文标签的正上方放置了一个内容占位符 然后我填充

  • Facebook 点赞按钮消失

    我的网站中的 Facebook Like 按钮出现问题 添加此代码 由 facebook 提供 按钮在创建时正确显示在任何页面中

  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是

随机推荐

  • 《C++ Primer Plus》学习随记3---引用变量

    int rats int rodents rats rodents就是一个引用变量 他是rats的别名 指向相同的值和内存单元 int 是类型名 引用变量必须在声明时将其初始化 引用变量一旦与某个变量关联起来 就将一直效忠于它 也就是没法再

  • ElasticSearch（一）

    分布式搜索引擎01 1 初识elasticsearch 1 1 了解ES 想象下 假设 JD上有上千万商品 现在要求你 说出 包含 手机 的商品有哪些 并说出商品ID 商品图片地址 商品价格 商品的名称 也就是说实现JD的搜索的功能你怎么办

  • Linux(3)拷贝文件到远程服务器上

    链接地址 https blog csdn net wudinaniya article details 81141530

  • 深聊性能测试，从入门到放弃之： Windows系统性能监控(三)任务管理器介绍及使用。

    任务管理器 1 引言 2 任务管理器 2 1 打开方式 2 2 介绍 2 2 1 定义 2 2 2 进程 2 2 3 性能 2 2 4 应用历史记录 2 2 5 启动 2 2 6 用户 2 2 7 详细信息 2 2 8 服务 3 总结 1

  • 从 Java 到 Go：实现实时数据更新和消息推送服务

    目录 1 Java 和 Go 的对比 1 1 语言特性 1 2 性能 2 项目概述 3 准备工作 4 代码实现

  • Activity 跳转到Fragment中（MainActivity中的Fragment）

    Activity 跳转到Fragment中 备注 MainActivity中的Fragment 如果大家有遇到这个问题 说明你来对了 楼主我可是踩了无数的坑 花了几天的时间才把这篇文章写下 现在App的模式一般都是Activity中多Fra

  • Redis底层设计

    Redis底层设计 底层设计 Redis的每种对象其实都由对象结构 redisObject 与 对应编码的数据结构组合而成 而每种对象类型对应若干编码方式 不同的编码方式所对应的底层数据结构是不同的 对象设计机制 对象结构 redisObj

  • setStyleSheet来设置图形界面的外观

    使用setStyleSheet来设置图形界面的外观 QT Style Sheets是一个很有利的工具 允许定制窗口的外观 此外还可以用子类QStyle来完成 他的语法很大比重来源于html的CSS 但是适用于窗口 概括 Style Shee

  • Go语言遍历文件夹下的所有文件，并求出MD5

    package main import crypto md5 encoding hex fmt io ioutil var files make byte 0 100 byte转md5 func ByteToMd5 fileByte byt

  • PUT_LINE没有输出问题解决方法

    DBMS OUTPUT PUT LINE output 方法用于BEGIN和AND中间 作用是输出结果 当我使用它时发现 没有打印出结果 查了资料 说是oracle默认是关闭的 要在sqlplus中执行 set serveroutput o

  • ChatGPT这么火，如果ChatGPT滥用或者重度依赖，会怎么样？

    目录 绪论 风险 风险1 思维能力 风险2 历史文献 风险3 舆论问题 总结 我们都知道 现在最火的就是ChatGPT 各大大厂都在讨论它 马大大也出山讨论它 可想而知 已经火到什么地步了 绪论 我不知道 有没有注意到他的标题 第一想到的不

  • MATLAB：图像乘除法运算（immultiply、imdivide函数），同时比较双精度类型图像运算结果...

    图像乘除法运算涉及到immultiply imdivide函数 实现代码如下 1 图像之间的乘法运算 close all 关闭当前所有图形窗口 清空工作空间变量 清除工作空间所有变量 clear all clc A imread ipexr

  • IIS实现http跳转https的重定向方法

    整体流程为 1 安装SSL证书 2 下载安装URL Rewrite模块 3 配置 URL重写 规则 或者修改web config配置文件 一 安装部署证书 首先安装SSL证书 二 安装URL ReWrite扩展 URL ReWrite扩展下

  • 猿创征文

    猿创征文 国产数据实战之docker部署MyWebSQL数据库管理工具 一 MyWebSQL介绍 1 MyWebSQL简介 2 MyWebSQL特点 二 检查本地环境 1 检查docker状态 2 检查docker compose版本 三

  • Ubuntu 20系统WIFI设置静态IP地址，以及断连问题

    最近工作需要购置了一台GPU机器 然后搭建了深度学习的运行环境 在工作中将这台机器当做深度学习的服务器来使用 前期已经配置好多用户以及基础环境 但最近通过xshell连接总是不间断的出现断连现象 补充一点 Ubuntu系统中与网络设置有关的

  • Oracle报错ORA-00911: 无效字符问题

    跑kettle任务 今天写sql查询数据库数据时出现ORA 00911 无效字符问题 我把SQL到toad中是可以查询到数据的 但是在MyECLIPSE中执行就报ORA 00911 无效字符的错误 原因 SQL中 有个 分号 里面多了一个

  • Mac 安装 Neo4j

    1 下载Neo4j 社区版 MacOS安装社区版Neo4j 图数据库 https blog csdn net huacha article details 81123410 问题 在下载JDK时需要Oracle 登陆账号 解决方法 http

  • Vue+ElementUI实现简单的用户管理系统（四）：查看用户详情页及删除用户

    一 展示用户详细信息 在点击 查看 按钮时 传递了用户的Id 我们要把这个Id拿出来 this route query id created this handle this route query id handle方法 也就是根据id使

  • [YOLO专题-3]：总体-目标检测的常见模型评估指标

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 https blog csdn net HiWangWenBing article details 122134907 目录 前言

  • HTML BFC的理解与作用

    HTML BFC的理解与作用 含义 BFC Block formatting context 直译为 块级格式化上下文 它是一个独立的渲染区域 只有Block level box参与 它规定了内部的Block level Box如何布局 并

热门标签