BFC
时间:2020-04-21
本文章向大家介绍BFC,主要包括BFC使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
BFC(Block formatting context)直译为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC的布局规则
一、内部的Box会在垂直方向,一个接一个地放置。
二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(按照最大margin值设置)
三、每个元素的margin box的左边, 与包含块border box的左边相接触
四、BFC的区域不会与float box重叠。
五、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
六、计算BFC的高度时,浮动元素也参与计算
哪些元素或属性能触发BFC
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
BFC的应用
1、自适应两栏布局
2、清除内部浮动
3、防止margin上下重叠
原文地址:https://www.cnblogs.com/msx-hanquan/p/12743691.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- flutter仿微信底部图标渐变功能的实现代码
- Flutter 插件url_launcher简介
- Laravel框架查询构造器 CURD操作示例
- androidx下的fragment的lazy懒加载问题详解
- Thinkphp5框架简单实现钩子(Hook)行为的方法示例
- Android PhoneWindowManager监听屏幕右侧向左滑动实现返回功能
- Laravel框架创建路由的方法详解
- Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
- 解决Laravel blade模板转义html标签的问题
- laravel 配置路由 api和web定义的路由的区别详解
- Flutter 实现网易云音乐字幕的代码
- Yii框架通过请求组件处理get,post请求的方法分析
- PHP实现单文件、多个单文件、多文件上传函数的封装示例
- Android自定义控件单位尺寸实现代码
- Android中socket通信的简单实现