浮动的父子或兄弟之间互不影响------BFC属性(非标准文档流)

最新推荐文章于 2020-12-11 19:56:53 发布
最新推荐文章于 2020-12-11 19:56:53 发布
阅读量288 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： WEB/network front end
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41228218/article/details/95880764
在盒子元素布局时，BFC提供特定环境，元素按规则布局不会影响其他环境。如浮动元素形成BFC，其内部子元素主要受该浮动元素影响，不同浮动元素间互不干扰。

在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的
参考:
https://blog.youkuaiyun.com/riddle1981/article/details/52126522

2022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
m0_54849806的博客
08-01 6463
JS是单线程模型，只能通过这种多进程的方式提高性能）使用ParallelUglifyPlugin开启多进程压缩JS文件（使用UglifyJS插件压缩JS代码时，需要先将代码解析成Object表示的AST（抽象语法树），再去应用各种规则去分析和处理AST，所以这个过程计算量大耗时较多。ParallelUglifyPlugin可以开启多个子进程，每个子进程使用UglifyJS压缩代码，可以并行执行，能显著缩短压缩时间）...
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 3160
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
html非标准文档流（浮动）整理。
weixin_33912453的博客
01-05 153
一、为什么需要浮动？块级元素不能与任何元素标签在同一行，行级元素虽然可以和行级元素在同一行，但是无法调整元素的宽高！所以标准的文档流限制太多，非常生硬，不够灵活。为了让行内元素有并排的效果，也要能设置宽高，所以就需要浮动。二、关于浮动的性质。浮动的元素会脱离标准的文档流!！这个很重要！当为标签设置了浮动之后，这个标签就可以有宽和高属性，即使是未转换的行内元素也可以设置宽和高。...
浮动元素与兄弟之间的关系 速记 1211
pyhui的技术博客
12-11 430
标准情况 红浮蓝标 红浮蓝浮 黄盒子加入 标准流的盒子 浮动的粉色盒子来了 现象 跟随在标准流的盒子后面 不会俞越标准流 理解方式 标准流的盒子，是人界 浮动的盒子，是幽灵 当我们进行排队的时候 人，可以抢占幽灵的位置 但是 幽灵是不会占在人的位置的，幽灵惧怕人的阳气 来了一个绿盒子 标准流的 粉色盒子变成了标准流 绿色的盒子会跑到粉色盒子的后面 来了一个金色的盒子排第一个 金色的盒子是标准流 思考，后面的盒子如何排序 原则： 人可以抢幽灵的位置 幽灵一定不会抢人的位置 标准流的盒子会占据
css 非标准文档流之使用浮动实现块元素并排以及带来的问题解决
07-14 274
子盒子浮动后就不在占用空间父盒子里没东西就会坍塌,父盒子下面的盒子就会顶上去占据父盒子位置: 以下几种解决方案根据具体情况选择: 方案一 固定父盒子大小(适用于长时间无需改动的div,否则后期不好维护): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
CSS：父子元素浮动分析和清除浮动
weixin_34038652的博客
12-11 752
2019独角兽企业重金招聘Python工程师标准>>> ...
如何不使用float浮动（避免浮动对其他元素造成影响）确定表单与before伪类的相对位置
qq_43692949的博客
04-01 770
先上图： 由于使用了float浮动，三角形下方的一块区域都会受到浮动的影响，所以只好用几个让Email Adress下移。（这真是一个垃圾的方法啊） 再上代码： HTML <div class="dropdown"> <a href="#" class="dropbtn">Login</a> <div class="dro...
Web布局中BFC(块级格式化上下文)的应用与解决方案
最新发布
02-11
BFC是一个独立布局环境，在该环境中元素按照一定规则进行排布而内外互不干扰，并列出若干布局特性如内部元素依次垂直排列，垂直方向上的距离取决于边缘空白（Margin），左侧贴合外部左边框而不受其他浮动静态盒的...
什么是BFC？如何解决垂直外边距重叠与高度塌陷？看这一篇就够了
tzw14030140049的博客
04-17 824
一、概念 BFC：块级格式上下文 注意：针对块级元素有效，内联元素参考IFC(行级格式上下文) MDN中的解释： 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 创建方式： 根元素或其它包含它的元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具...
关于浮动和BFC的理解
weixin_30456039的博客
04-08 329
遇到过很多次关于左边图片右边文字，文字环绕图片 || 防止文字（或其他元素）环绕 的问题，今天给自己做一个小小的总结。 浮动根据官方的说法是：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 || 浮动元素之后的元素将围绕它。 || 浮动元素之前的元...
css布局中的BFC问题
田兴的博客
10-19 8894
1. 面试题—双边距（边距重叠） 什么是边距重叠？ 什么情况下会发生边距重叠？ 如何解决边距重叠？ 边距重叠： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。 有两种边距重叠的情况： 1. 父子关系的边距重叠 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距，给父元素添加 overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距，但是父元素的高会变化。
谈谈BFC对布局的一些影响
Web前端开发工程师
10-15 312
先来分析一个现象。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音悦台</title> <style type="text/css"> *{ margin...
标准流与非标准流
逆天骚年的博客
08-26 1019
 流：html元素在网页中显示的顺序 标准流：在html文件中，写在前面的元素在前面显示，写在后面的html在后面显示 非标准流：在html文件中，当某个元素脱离标准流，那么它就处于非标准流 右浮动：一个元素向右浮动，让出自己在标准流占据的空间，向右移动知道碰到包含自己的父元素的最右边的边框 左浮动：匀速尽量向左边移动，这样就让出它右面的空间，让别的块元素显示 清除浮动
关于对BFC的理解 By 逆战班-Lawice
weixin_46417440的博客
02-29 184
块级格式上下文 什么是BFC 全称Block Formatting Context，简称BFC 它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局 注意是常规流块盒（所以并不包含行盒） 常规流块盒在水平方向上，必须撑满包含块； 常规流块盒在包含块的垂直方向上依次摆放； 常规流块盒若外边距无缝相邻，则进行外边距合并； 常规流块盒的自动高度和摆放位置，会无视浮动、绝对定位、固定定位等脱...
BFC布局
sysuzhyupeng的博客
04-24 1440
常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML
iframe-父子-兄弟页面相互传值(jq和js两种方法)
anyao4367的博客
01-03 1189
参考文章： http://blog.youkuaiyun.com/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html 父窗口代码 <body> <iframeid="frame"name="frame...
这一次终于弄懂了 CSS BFC、清除浮动、外边距折叠
止水聊技术
11-16 338
BFC块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视化 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元...
了解关于BFC的那些事
one dream
08-02 156
关于BFC   BFC是一个独立的渲染区域，规定块元素的布局规则，只有块元素才能参与。   布局规则      块元素独占一行，上下排列 同一个BFC两个块元素上下margin会重叠 盒子的左边边框和外边距相邻 浮动区域和BFC区域不会重叠 每一个BFC区域是独立的，相互之间不会影响 BFC计算高度时，浮动区域也参与高度计算   触发条件 html根元素 浮动left right 定位 absolute
React-RDoc: 创造文档与博客网站的React工具
React-RDoc 是一种基于 React 的文档生成工具，它利用 React 库的强大功能来创建结构化的文档网站或简单博客网站。文档生成工具通常被用来自动化文档的创建和管理流程，减少手工编写和维护文档的工作量。React-RDoc ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ROOOOOOM

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值