代码编织梦想

什么是bfc

BFC直译起来就是块级格式化上下文。它相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素。

BFC的规则

BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签

BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列

垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠

计算BFC的高度时,浮动元素也参与计算

如何触发bfc

  • overflow: hidden
  • display: flex
  • display: table-cell
  • display: inline-block
  • position: fixed
  • position: absolute

bfc的作用

  • 解决子元素使用Float脱离文档流,父盒子高度塌陷问题

bfc有一个特性,计算BFC的高度时,浮动元素也参与计算,因此,当一个盒子的子元素浮动时,可以给父盒子设置属性,比如说,设置display: inline-block,来触发bfc。

  • 解决Margin边距重叠问题

根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质,可以给其中一个盒子再包裹一个盒子父元素,并触发其BFC功能(例如添加overflow:hidden;)这样垂直方向的两个盒子就不在同一个BFC中了,因此也不会发生垂直外边距合并的问题了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_51382988/article/details/128841183

css之bfc总结-爱代码爱编程

一 BFC概念:     BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。(它的定位体系属于常规文档流。怎么理解这句话); 二 如何创建一个BFC:    1 float的值不为none;    2 position的值不为static或者relative;    3 display的值为

关于盒子模型的bfc总结-爱代码爱编程

BFC全称是Block Formatting Context,中文意思为:块级格式化上下文,是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。以下方式都会隐形创建一个BFC: 设置float的值为left或right;position的值为absolute或fixed;display的值为flex,table;overflow的

js中bfc如何理解?-爱代码爱编程

BFC解析 BFC是什么?: bfc全称为块级格式化上下文(Block Fromatting Context)。BFC如何产生?: 满足一下其中一种条件就可以触发BFC。 position:absolute; dis

BFC总结和使用-爱代码爱编程

BFC小结 前言 在写css样式时,可能是添加了一个样式后就达到了预期效果。有没有想过,是我们在不经意间触发了什么,帮助我们达到了效果?本文就快速介绍下css样式中经常使用的BFC,主要包括以下几个方面: 什么是BFC如何生成BFCBFC的布局规则应用 什么是BFC 首先看下什么是Formatting Context CSS2.1规范中的

css盒模型 BFC 总结-爱代码爱编程

盒模型 BFC 总结 盒模型由 margi border padding content -盒模型有标准模型与 IE 模型两种类型 -标准模型的 width,height 就是 content 的 width,heightIE 模型的 width,height 就是 content+padding+border 的 width,height -两者之间转

CSS BFC 总结-爱代码爱编程

01 BFC 简介 BFC(Block Formatting Context) 块格式化上下文 BFC 是一个独立的区域,是块盒子的布局发生的的区域,也是浮动元素和其他元素交互的区域。 02 父元素触发 BFC 的情况: 根元素浮动元素(float 不是 none)绝对定位元素(position 为 absolute 或 fixed)display

bfc总结_万小希的博客-爱代码爱编程

BFC概念:块格式化上下文,BFC是一个独立的布局环境。内部元素不会受外部影响 创建条件: 根元素:body;元素设置浮动:float 除 none 以外的值;元素设置绝对定位:position (absolute、fi

css中bfc总结_孙景荣的博客-爱代码爱编程

一、什么是BFC 块级格式化上下文,独立的渲染区域,与外部毫不相干 二、布局规则 1、内部的Box会在垂直方向,一个接一个地放置 2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margi

过年了,给网站加个灯笼+飘雪效果!-爱代码爱编程

过年了,下面分享一个网站的特效,给网站添加一个新春灯笼和飘雪的效果,过年期间多一点年味。 灯笼特效 下面是css样式,可以放在公共样式中: .deng-box{position:fixed;top:-40px;right:150px;z-index:9999;pointer-eve

css - 实现loading加载动画-爱代码爱编程

Loading加载动画 用CSS都用实现一个loading的加载动画 通过控制 item-loader-container 来实现显示及隐藏 <div class="item-loader-c

响应式布局-爱代码爱编程

文章目录 响应式布局设置meta标签@media 媒体查询使用使用style标签使用link引入 flex自适应布局响应式布局rem实现字体大小自适应rem弹性布局 响应式布局 设置meta标签

css 过渡动画-爱代码爱编程

目录 过渡动画1 css 属性1.1 transform 变换(平移旋转缩放)1.2 animation 动画1.2.1 keyframes 1.3 transition 过渡1.4 比较 2 方式2.1

css新属性-爱代码爱编程

scroll-snap-type 滚动,让元素滚动到设定的位置 scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximi

第2章:使用css定义样式-爱代码爱编程

在前一章中,我们研究了Java代码的不同片段。 在本章中,我们将对每个示例使用相同的代码段: public void createPdf(String html, String dest) throws IOException {     HtmlConverter.convertToPdf(html, new FileOutputStream(des

vue3组合api基本语法使用-爱代码爱编程

文章目录 一、生命周期钩子函数二、创建vue应用实例基本步骤:三、选项API和组合API四、setup组件选项函数在这个函数中做的事情有:1.定义响应式变量2.定义方法3.执行钩子函数4. 定义计算属性5.监听