在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？本文就快速介绍下css样式中经常使用的BFC，主要包括以下几个方面：
margine 正常情况下使用 , 设置 float 浮动 , 使得相邻的盒子模型紧贴在一起 ;
虽然可能你没听过BFC是什么，但是你一定用过，其是一种在CSS中存在的技术，你可能只是一直不知道有这样一个专业名词，本文就来介绍一下到底什么是BFC
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
1.Float的设计初衷仅仅是： 实现文字环绕效果，如下图所示： Paste_Image.png 明白了float的设计初衷，就可以明白float特有的行为表现了。 我们都知道，使用float会产生一
两个块同一个BFC会造成外边距折叠，但如果对这两个块分别设置BFC，那么边距重叠的问题就不存在了。
当我们学习CSS时，我们大多数人学到的第一件事是CSS中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。
1.margin与百分比单位 Paste_Image.png Paste_Image.png 2.margin重叠 margin重叠通常特性： 只发生在block水平元素（例如：p、div、list、
上述 单元格 与 单元格 之间 的边框 , 单元格 与 表格 之间 的边框 , 出现了重叠 , 每个重叠处都有 两条线 ;
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
注：这里span、span::before、span::after三者都重叠在同一个位置了，其中span无颜色，其余为白色
div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 下列方式会创建块格式化上下文：
三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些出现在html标签里面的单词,对网页内容的语义含义作出了如下描述，例如，This is a paragraph标签表达了这样一个语意:这是一个文本段落。但这些标签并不包含任何关于段落如何显示的信息。 2、表示层: 表示层由CSS负责完成。CSS描述页面内容应该如何呈现。 3、行为层: 行为层负责内容应该如何响应事件这一问题,这是Java
This is a paragraph
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
relative可定位，但是不改变容器尺寸和占据的空间 margin不同，margin也在盒模型中。 从border开始往里边，是可视尺寸clientWidth部分。 加上margin，是占据尺寸outerWidth margin可以改变元素尺寸，正值宽度变小，负值宽度变大。 margin也可以定位
在使用 多个类型的 基础选择器 进行 组合 时 , 如 交集选择器 / 后代选择器 等 , 涉及到将 多个 基础选择器 的 权重进行叠加 ;
文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～
在最右端时 left: 100%; transform: translateX(-100%)
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 CSS盒模型：标准模型 + IE模型
1、translate(x,y) 设置盒子位移 2、scale(x,y) 设置盒子缩放 3、rotate(deg) 设置盒子旋转 4、skew(x-angle,y-angle) 设置盒子斜切 5、perspective 设置透视距离 6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示 7、translateX、translateY、translateZ 设置三维移动 8、rotateX、rotateY、rotateZ 设置三维旋转 9、scaleX、scaleY、scaleZ 设置三维缩放 10、tranform-origin 设置变形的中心点 11、backface-visibility 设置盒子背面是否可见
Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
2. 两个重叠模型模拟双pass,顺便解决透明乱序问题_魁梧的抠脚大汉-CSDN博客
如果你在日常工作中使用CSS，那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关注CSS的实现原理。
文章目录 写在前面 什么是BFC 解决了什么问题 如何解决 包含内部浮动元素 排除外部浮动 解决margin重叠 解决margin塌陷 总结 写在前面 因为这篇文章内容属于比较常见的一个面试题，所以帖子里面很多讲过了，我还是决定还是写一篇关于BFC的文章，因为考虑到我可以用比较简介的语言讲明白，不是为了水文章，看完绝对有点帮助的。 什么是BFC Block Formatting Context 块级格式化上下文 这是他的定义，其实很好理解了，因为css的默认规则是很多的，比如分为了行内元素，块级元素
自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念，负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做，但是没有人会谈论它。（It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.） 为其正名 我们都使用过CSS得外边距，但是当谈到负边距的时候，我们好像往差的方向发展啦。在网页设
2018搜狐前端笔试题 盒模型本质上是用以封装HTML元素的概念盒子，它包含了边距，边框，填充以及实际内容。 即由外向里是 margin, border, padding, content
学习《HTML5与CSS3权威指南》这本书很不错，学完之后我颇有感触，觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。
在 移动端 对 CSS3 的支持 要比 PC 端支持的更好 , 建议在移动端开发时 , 多使用 CSS3 ;
最近项目中有一接口返回的一个字段是html格式的字符串，里边每个div中style的高度是固定的px，然后再手机端显示的时候发现，div中的内容重叠了；效果图如下：
https://www.imooc.com/t/197450 float float的设计初衷/原本作用-是为了实现文字环绕效果 如，一个图片和一段文字垂直放置，给图片加上浮动，文字就环绕图片展示了。 浮动的包裹与破坏 包裹 收缩 坚挺 隔绝 - BFC 具有包裹的其他属性：(是不是可以生成块级上下文的其他属性？) display: inline-block、table-cell... position: absolute(近亲)、fixed、sticky overflow： hi
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性 、style标签、导入和链接。
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我，若你是真心学习可以送你书籍，指导你学习，给予你目标方向的学习路线，无套路，博客为证。
CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481
属性选择器 , 伪类选择器 的 权重 , 与 类选择器 权重相同 , 都是 10 ;
HTML5学堂-码匠：W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少？ 有不少前端开发工程师，可能并不清楚下面的部分词语，但是在实战中其实都在使用着它们。 明确一
前言 在上两篇文章中我介绍了如何直接将Geotiff（一个或者多个）发布为TMS服务。这中间其实我遇到了一个问题，并且这个问题伴随Geotrellis的几乎所有使用案例，下面我详细讲述。 一、问题描述 无论在将Tiff文件使用Geotrellis导入Accumulo中还是直接将其发布为TMS服务，其实这中间都存在一个问题：当多个Tiff文件存在重叠部分的时候如何接边、去重叠以及在边界处的瓦片如何取出各Tiff文件中涉及到的数据，即保持瓦片显示效果的完整性。 这个问题可以说是一个问题也可以说是两个问题。当我们
在Safari浏览器下(此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器)，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。例如下面的场景，图中红框里面的模块，使用 3D transform变换，进行旋转动画，但是在Safari浏览器下，忽略了二维码遮罩层的z-index,结果使用了真实世界的3D视角进行渲染。出现了重叠的bug：
注意点：其中伪元素before和after插入的content是插入到class=“clearfix”的div内部的头部和尾部的。
效果展示 Demo代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
在进入BFC话题前，先来捋一下常见的定位方案，定位方案是控制元素的布局，主要有三种常见的方案：
盒子模型又称为框模型，HTML页面所有的元素都具有盒子模型，该模型用于设计HTML页面和实现HTML页面布局。
注：span::before和after位置发生了重叠，图中其实红色与白色方块位于同一位置，只是after后面设置，最后显示为红色了
在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表.
简而言之，就是样式、布局，使html的框架更好看，把html元素定位在自己想要放的位置。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
