浅谈BFC格局~

good123
• 阅读 539

1.BFC含义💳 BFC全称: Block Formatting Contexts 块级元素格式化上下文

W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互关系

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型,不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器)

BFC内部的元素和外部的元素不会互相影响~~🎈

2.BFC触发条件🔨 满足以下条件之一就可触发BFC 根元素 float 的值不为 none

overflow 的值不为 visible

display 的值为 inline-block、table-cell、table-caption

position 的值为 absolute 或 fixed

3.BFC布局规则🔒 浮动的元素会被父级计算高度(父级触发了BFC) 非浮动元素不会覆盖浮动元素位置(非浮动元素触发了BFC) margin不会传递给父级(父级触发了BFC) 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠 BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素 计算 BFC 的高度时,浮动元素也会参与计算 BFC 的区域不会与 float box 重叠 3.BFC作用🔧 ◾ 1)自适应两栏布局

◾ 2)可以阻止元素被浮动元素覆盖

◾ 3)可以清除内部浮动

◾ 4)可以阻止margin重叠

BFC在前端页面布局中十分常见也灰常重要~

好买网

本文来自博客园,作者:不知名前端李小白,转载请注明原文链接:https://www.cnblogs.com/libo-web/p/15457210.html

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
明月 明月
2年前
css实现文字两端对齐
language这是摘哦给你发觉得斯蒂芬这是摘哦给你发觉得斯蒂芬在块级元素box上面,加上textalign:justify;,在span元素上加上样式languagedisplay:inlineblock;paddingleft:100%;效果图
小嫌 小嫌
2年前
css中块状元素和内联元素
CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。块状元素块状元素特点1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。常用的块状元素有:、
菜园前端 菜园前端
1年前
考考你HTML常用的标签有哪些?
原文链接:基础标签div块元素介绍:没有任何含义,主要用于div进行模块布局类型:块级元素block,盒子占用宽度为一整行属性:没有属性language我是模块span行内文本元素介绍:没有任何含义,主要用于展示文本内容类型:内联元素inline,盒子占用
Wesley13 Wesley13
2年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Stella981 Stella981
2年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Wesley13 Wesley13
2年前
CSS定位规则之BFC
技术改变世界!学习改变人生!1. BFC(block formatting context,中文常译为块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候,BFC提供了一个环境,在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素
Wesley13 Wesley13
2年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Stella981 Stella981
2年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
京东云开发者 京东云开发者
6个月前
分布式系统的主键生成方案对比 | 京东云技术团队
UUID​UUID(通用唯一识别码)是由32个十六进制数组成的无序字符串,通过一定的算法计算出来。为了保证其唯一性,UUID规范定义了包括网卡MAC地址、时间戳、名字空间(Namespace)、随机或伪随机数、时序等元素,以及从这些元素生成UUID的算法。