BFC 原理

最新推荐文章于 2021-12-30 11:06:10 发布
最新推荐文章于 2021-12-30 11:06:10 发布
阅读量225 收藏
点赞数
分类专栏： html+css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuxu_qkz/article/details/80168921
版权

BFC：块级格式化上下文，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

其实也就是清除浮动的原理

xuxu_qkz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10分钟理解CSS BFC原理及其应用
09-27
主要介绍了10分钟理解BFC原理及其应用的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css 清除浮动的方法
gu_eu的博客
03-08 447
css 清除浮动 浮动布局、定位布局、百分比布局为css中布局的常用的布局方式，而且兼容性会比较好。随着flex的流行，以后会是主流，但IE10以下不兼容flex布局。 float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，被设置了 float 的元素会脱离文档流（可以清空格）。 清楚浮动的概念 在非IE浏览器下，当容器的高度为auto，且容器的内容中有浮动的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响布局的现象。这个现象叫浮
【清除浮动】清除浮动的四种方法详解
qq_46036334的博客
12-30 1232
列举不同的清除浮动的技巧，并指出他们各自适用的使用场景
html清除浮动不占位置,CSS 中的浮动和清除浮动，梳理一下！
weixin_29002209的博客
06-03 410
从业三年，项目无数，现在回过头来，想要把一些重要的知识用白话整理出来：这个东西是什么？怎样才是最佳实践？希望对自己知识体系有梳理作用， 也希望对大家有些许帮助。前端技术栈更新太快，眼花缭乱，大家一个劲揽过来学习的时候，别忘了回头看看那些已经掌握的基础知识。第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧。浮动到底是什么？浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父...
清除浮动的5种方式
FightingY的博客
10-07 245
1.伪对象法: .clearflex::after{ content:""; display:block; clear:both; height:0; overflow:hidden;} .clearflex{zoom:1;} 2.父元素加clear:both; 3.父元素加overflow:hidden; 4.空div法 浮动元素的后面加一个<div class="clear"></div>,添加样式.clear{clear:both} 5.父元素加hei.
清除浮动的几种方式
qq_37987993的博客
06-29 194
Css对于浮动的定义：使元素脱离了文档流，按照指定方向移动，直到碰到包含框或另一个浮动框为止。 本人现在虽然已经不用浮动了，都用弹性布局flex，但是不可否认，浮动是在弹性布局出现之前使用最多的。而清除浮动有哪些方法，哪些方法又是推荐的。 1、overflow: hidden 子元素浮动了，那么给父元素设置属性overflow: hidden，浮动就清除了，这个方法唯一的缺点就是超出父元素的会被隐藏。 2、增加额外标签，然后添加属性clear: both 在这个使用了浮动之后增加一个标签，这个标签
前端知识css原理
03-13
介绍什么是BFC,他有那些特性，css得层叠和继承，！important有哪些使用情况
多功能 电路版原理图
11-02
封疆大吏是福建 发生的老骥伏枥都是飞第三方定时飞放电 佛挡杀佛电缆附件印丝图
CSS学习总结
01-19
1.清除浮动 老生常谈的话题，面试经常问的问题 解决方法有很多种，...这种方法可以扩展出很多种不同的方法，如JS动态添加，设置一个公共的类然后添加，或者直接就是一段内联style的html代码，但是原理都是用到了clea
详解css中清除浮动的四种方式，float怎么用最合理
夸克IT
09-11 246
css基础篇（第四篇） 回顾 在上一讲中我们基本上学习了 css 中经典的塌陷问题以及 margin 和 padding 具体指的是什么和怎么合理运用，除此之外，在上一讲的最后我们还了解了圆角边框和盒子阴影，更能熟悉的学习对于盒子更多非常规的时候怎么去贴合业务。掌握基础是非常重要的，所以需要不停的学习和练习。 css布局的三种机制 在之前我们认识的都是css中按照正常流去布局的，正常流就是按照正常的逻辑从上到下，从左到右去布局，这次以及往后我们学习了浮动和定位之后你会发现，其实在日常的业务和工作当中按照正常
浮动清除的四大主要方式
blog
12-23 590
文章目录前言一、clear属性二、空标记三、overflow属性四、伪类总结 前言 浮动布局（float）和定位布局（position）为 css 中布局的常用的两种布局方式，在 css3 中虽然出现了弹性布局（flex），但毕竟是新出的属性对于早期的浏览器兼容并不是很理想IE11才开始兼容。 浮动布局主要是通过 float属性控制元素向左或向右移动，使周围的元素也会重新排列。 由于浮动元素将不再占用原文档流的位置，使用浮动时会影响后面相邻的固定元素。常见的形式有父盒子高度坍塌、浮动盒子与非浮动盒子重叠等
前端实现样式的方法
谢志强
05-30 348
块垂直居中 绝对移动 50% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #one{ width:...
jQuery的事件委托方法on、live、delegate之间有什么区别？
xuxu_qkz的博客
10-25 9198
jQuery的事件委托方法on、live、delegate之间有什么区别？ 首先什么是事件委派？ 事件委派（委托）： 事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。当页面同步加载时，会添加事件。有时数据是由异步加载，同步无法给不存在（刚开始）的元素添加事件。此时我们可以在一开始就存在的**父元素**上添加事件，再通过父元素在触发时找子元素。
利用CSS3制作简单的背景图片
xuxu_qkz的博客
10-25 1186
利用CSS3制作简单的背景图片<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS3渐变属性制作纹理图案</title> <style type="text/css" media="screen">.patterns { width: 200px; height: 200px;
对于行内元素、块级元素的认识
xuxu_qkz的博客
10-25 231
常见的行内元素有哪些？块级元素有哪些？ 常见的行内元素有： a - 超链接（锚点） br - 换行 em - 强调 img - 图片 input - 输入框 label - 表格标签 select - 项目选择 span - 常用内联容器，定义文本内区块 strong - 粗体强调 sub - 下标 sup - 上标 inp
垂直水平居中的方式
xuxu_qkz的博客
10-25 223
垂直水平居中的方式列举出了四种方式： pos
node-v0.8.10-sunos-x64.tar.gz
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【课程设计】实现的金融风控贷款违约预测python源码.zip
05-16
【课程设计】实现的金融风控贷款违约预测python源码.zip
什么时候使用BFC布局
05-13
BFC（Block Formatting Context）布局是一种常用的布局方式，特别适用于处理浮动元素、清除浮动、防止 margin 重叠等问题。以下是一些常见情况下建议使用BFC布局的场景： 1. 处理浮动元素：当一个元素设置了浮动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值