css中bfc是什么意思?


css中bfc是什么意思?

说BFC之前先说说文档流,文档流分为:浮动流、定位流、普通的标准流,而普通标准流其实就是BFC中的FC。

FC:formatting context的英文缩写,翻译过来就是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及与元素之间的关系和作用。

常见的FC:BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。

● BFC的定义

BFC(Block formatting context )“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

● 触发BFC的条件

满足下列条件之一就可以触发BFC

1:根元素,即html元素

2:float的值不为none

3:overflow的值不为visible

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

5:position的值为absolute或者fixed

● BFC是页面独立的一个容器,与外界的毫无关系。

(相关课程推荐:css视频教程

● BFC的作用

BFC最经典的一个应用就是清除浮动造成的影响

Snipaste_2019-12-27_10-52-39.jpg

触发父元素的BFC可以解决这个问题。

<style>
        .box {
            width: 200px;
            border: 1px solid #ccc;
            overflow:hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
Image placeholder
前端答疑
未设置
  26人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css中1em什么意思?

css中1em什么意思?em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em为了简化font-size的

none在css中表示什么意思?

none在css中表示什么意思?none本意是【没有】的意思,在css中,表示令某个元素失效。常用于display、border、outline、list-style等属性中。display:none

css样式是什么意思?

CSS(CascadingStyleSheets,层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS就是一种叫做样式表

css样式表是什么意思?

CSS主要用来设计网页的样式,美化网页;它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥

css预处理器是什么意思?

css预处理器是什么意思?css预处理器用来定义一种新的语言,完全兼容css语法,它为css增加了一些编程的特性,比如变量、函数、逻辑控制。css预处理器编写的css不能直接被浏览器识别,需要编译生成

css+div什么意思?

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。提起DIV+CSS组合,还要从XHTML说起。XHTML是

jQuery中#是什么意思?

jQuery中#是什么意思?#是jquery选择器的一种形式,匹配任意html中id的对象。$("#idvalue"):这个代码选中html文档中,即;jQuery元素选择器和属性选择器允许您通过标签

vue.js是什么意思?

Vue.js是一套构建用户界面的渐进式框架,一款流行的JavaScript前端框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与

“margin:0 atuo;” 是什么意思?

推荐课程:CSS3基础视频教程#WEB前端必修课--学习猿地免费体验课 “margin:0atuo;”是什么意思? “margin:0atuo;”所代表的的意思是水平居中,其中的margin后面如果只

jquery中bind与on的区别是什么?

jquery中bind与on的区别bind和on都是事件绑定,都是给元素绑定事件用的,但是两者却又有着一个大区别:事件冒泡(事件代理)。事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类的去

css width是什么意思

width是宽度的意思,它是CSS中的一个用于设置元素宽度的属性。width属性设置元素的宽度。width属性定义元素内容区的宽度,在内容区外面可以增加内边距、边框和外边距;行内非替换元素会忽略这个属

node中文什么意思?

起初,RyanDahl称他的项目为web.js,就是一个Web服务器,但是项目的发展超过了他最初单纯开发一个Web服务器的想法,变成了构建网络应用的一个基础框架,这样可以在它的基础上构建更多的东西,诸

node.js什么意思?

Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。Node是一个基于ChromeJavaScript运行时

jquery的$什么意思?

jquery的$什么意思?在jQuery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法。(相关课程推荐:jQu

jquery是什么意思呀?

jQuery是一个流行的JavaScript库,由JohnResig于2006年创建,目的是让开发者更容易地在网站上使用JavaScript。它不是一种单独的编程语言,与JavaScript一起工作。

Spring WebFlux 的设计及工作原理剖析

前言 Spring5发布有两年了,随Spring5一起发布了一个和SpringWebMvc同级的SpringWebFlux。这是一个支持反应式编程模型的新框架体系。反应式模型区别于传统的MVC最大的不

Spring Boot 中的响应式编程和 WebFlux 入门

Spring5.0中发布了重量级组件Webflux,拉起了响应式编程的规模使用序幕。WebFlux使用的场景是异步非阻塞的,使用Webflux作为系统解决方案,在大多数场景下可以提高系统吞吐量。Spr

hover在css中有什么用?

hover在css中有什么用?以下是我总结出的hover在css中的作用,供各位参考:修改鼠标悬浮时a标签的颜色使用hover实现悬浮显示二维码仿html元素的title属性效果给网页增加动效,如鼠标

js中如何引入css文件以及路径问题

js中如何引入css文件以及路径问题一、在js中引入css文件的方法:1、通过document.createElement方法创建link标签;2、通过setAttribute方法设置link标签的c

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css中Position属性图文详解

1.介绍1.1说明Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。1.2主要的值①absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。

css中怎么设置没有内容时高度为0

css中怎么设置没有内容时高度为0默认情况下HTML元素没有内容时,高度就是0,不需要手动设置。但这时有些元素仍然具有margin属性,这会对其他元素造成影响,如p标签。(相关课程推荐:css视频教程

css中ul怎么定位

css中ul怎么定位css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的cssposition属性即可。关于定位的几种方式1、static定位(普通流定位)--默认定

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

asp怎么调用css中样式

asp怎么调用css中样式asp调用外部css文件有以下三种方式:1、link链接方式在需要调用的asp文件中写入一下语句:(相关课程推荐:css视频教程)2、@import导入方式在需要调用的asp