MDN文档里的原话确实不怎么像人话，能看懂就奇了怪了。 简而言之,BFC就是一个独立的布局环境，可以认为是一个容器，在这个容器里面你随便放都不会影响到容器外的布局。而且一旦触发了BFC，那容器内部怎么布局也不受外面影响。
鼠标移入div，显示菜单ul，移出后隐藏菜单ul，只使用CSS，如何实现既有淡入淡出的效果，而又不影响其他元素，不产生回流？
BFC（Block Formatting Context）格式化上下文，是盒模型的一种渲染布局，简言之可以理解为 一个独立的容器，不受外部影响，不影响外部。
Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
当DOM的变化影响了元素的几何信息(元素的的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
本文将讲述 CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。为了掌握它们，有必要写出来探讨一下，如有错误欢迎指正。
版权声明：本文为博主原创文章，欢迎转载，转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/68954481
常见的块级元素有：div；p；form；ul；li；ol；dl；hr；table；h1~h6；
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介 在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
提起断言，接触过软件测试相关工种的同学们，一定不会陌生。比如，功能测试/自动化测试判断用例是否通过，靠的就是检查测试结果与预期是否一致；稍微不同的是，功能测试的结果检查是由人工完成的，而自动化测试是通过预先把期望结果写入脚本，并与实际执行结果进行比对来完成的。这个比对的行为就是断言，依据断言的结果是True或False判定用例执行通过或失败。
在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。
日志内容是从零开始创建 WordPress 主题系列教程第五篇的第二部分，在这篇中，我们将展示如果显示博客日志的内容，并且使用一个 DIV 标签把博客日志的内容和日志的标题区分开。再次强调一次，上一篇关于 WordPress 主循环介绍的课程非常重要，你需要彻底明白之后才能继续学习。
注意：除非我们需要将元素 由其他定位模式 强制改回 标准流，否则一般情况下不用。
我们之前已经介绍过行元素，块元素及行内块元素的属性了，能够知道它们是具有自己默认的显示方式的，即元素会按照文档流 (document flow) 的方式，自上而下，从左到右进行布局，如果你想要改变元素默认的定位行为，就需要设置 position 属性了
opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。
webDriver是按照client/server模式设计，client就是我们的测试代码，发送请求，server就是打开的浏览器来打开client发出的请求并做出响应。
some inline text more text
more text
CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇
在 CSS 中，可见性可以通过 visibility 属性来控制。该属性有两个主要的取值：visible 和 hidden。
1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档
BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。那么首先先来说一下常见的三种控制布局的定位方案
写这篇文章的起因是源于这篇文章：谈谈面试与面试题 中关于position的讨论，文中一开始就说的这句话： 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了…… 说到position，那么稍微对c
本来上一篇就是练习篇的最后一篇文章了，但是有的小伙伴私下反映说是做了那么多练习，没有一个比较综合的demo练练手。因此宏哥在这里又补存了一些常见的知识点进行练习，在文章最后也通过实例给小伙伴们或者童鞋们进行了一个登录模块的自动化测试的实例，其他的你可以照猫画虎地轻松的搞定和实现。
3、当父元素中显示不下所有的已浮动子元素的话，那么最后一个将换行，依次类推。但有可能会被卡住
CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
WEB前端开发做什么？ PC端页面 移动端页面 解决用户体验问题 必备条件是什么？ 1>会上网，会打字，懂得互联网是什么 2>兴趣 3>肯练习 浏览器和服务器如何信息交互？ 通过浏览器如何查看请求
Web自动化用例在编写的时候要注意用例的独立性。当然，流程性质的用例一定是关联在一起的，而且比较长比较复杂，上下用例之间是有关联的，那就必须关联起来。
1.DOM Tree：浏览器将HTML解析成树形的数据结构，构建一颗DOM树，同时进行第三步。
本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了 BFC 以及 利用 BFC 解决外边距重叠问题。
display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
在CSS属性改变时，重渲染会分为“回流”、“重绘”和“直接合成”三种情况，分别对应从“布局定位”/“图层绘制”/“合成显示”开始，再走一遍上面的流程。
静电说：2023新年快乐！这也是新年的第一篇文章，再次祝福各位新年新气象。今天我们为大家分享11个新的Figma隐藏技巧，我猜你可能真的不知道。快学起来。
江湖一直有着这么一句名言“天下武功，唯快不破"。那么在软件测试领域，自然而然我们会想到软件自动化测试。软件自动化测试的实现自然离不开软件自动化测试工具。软件自动化测试工具是软件自动化的载体，只有通过工具，我们才能实现。武林也是一样，成为武功盖世，除了武林秘决之外，还要有依天剑、屠龙刀的配合。
CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。
imgfixed：元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
从Vue转到React差不多快三个月，这两种框架其实在设计哲学上完全是不一样的道路但是同时又那么相似。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷.由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱.
今天，我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。
1、CSS的三种定位机制 CSS 规定的定位机制有三种，分别是： 标准文档流（Normal flow）： 特点：从上到下，从左到右，输出文档内容。由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点： 在同一行内显示，不会改变HTML文档结构 ）组成。 浮动（Floats） 绝对定位（Absolute positioning） 言下之意就是网页布局和元素的定位都离不开这三种机制。 2、什么是W3C标准 W3C标准，是由万维网联盟制定的一系列标准，
一、前言 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。 BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。 二、正文 下面介绍触发BFC及BFC带来的影响 2.1、触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： * body 根元素 * 浮动元素：float 除 none 以外的值 * 绝对定位元素：po
七月虽然不是一个丰收的季节，但却是一个十分酷热的月份。不知有多少小伙伴跟我一样，顶着大太阳奔波在各种面试的征途中。面试是一个漫长的过程。但是也是一个让你快速提升的过程。其中包含了无数的血与泪。去面试前首先我们必须有牢固的基础知识，足够丰富的项目经历(就我而言差不多是三个完整项目经历，时间累计差不多接近一年)。然后就是表述能力，你要能把你的答案给面试官描述清楚，注意专业词汇，这将大大提高面试官对你的印象分！
转换(transform)是CSS3中最具有颠覆性的特征之一,可以实现元素的位移/旋转/缩放等效果.转换可以简单理解为变形.
上一篇中，只是简单地一带而过的说了一些驱动浏览器，这一篇继续说说驱动浏览器，然后再说一说元素定位的方法。
文/小魔女 本文简介 前端开发系列的第二篇文章 基础知识就像是一把宝剑，能让你驰骋在前端领域的战场 知识亦有温度，让我们对新知识永远保持热度吧 分享小魔女的音乐 html渲染、css解析 在面试中，这部分基础知识，非常常见。 将以最简洁的文字，让读者掌握。 浏览器从开始解析HTML到渲染结束都经历了什么？ 解析HTML文件，创建DOM树 解析CSS，形成CSS对象模型 将CSS与DOM合并，构建渲染树（rendering tree） 布局和绘制 浏览器解析CSS是从左开始还是从右？为什么？
BFC(块级化上下文) 是一个独立渲染的区域，处于 BFC 内部的元素与外部的元素互相隔离，使内外元素的定位不会互相影响
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
