BFC的作用及其应用
简单介绍BFC
BFC
就是块级格式化上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。
创建 BFC 的方式有:
1.html的根元素
2.float浮动
3.绝对定位
4.overflow不为 visible
5.display为表格布局或弹性布局
6.contain值为layout
7.content或 strict的元素等。
BFC的作用:
1.清除浮动
2.解决margin塌陷问题
BFC的特点:
1.内部box会一个一个的垂直放置
2.形成了BFC的区域不会与float box重叠,BFC在页面是个独立的容器,里外元素互不影响
3.BFC在计算高度时会把浮动元素计算进去
4.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)
BFC的作用及其应用的更多相关文章
- 【转】浅析BFC及其作用
1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...
- 浅析BFC及其作用
本文链接:https://blog.csdn.net/riddle1981/article/details/52126522
- BFC的概念及作用
在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...
- 浅析BFC布局的概念以及作用
BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...
- BFC的概念、BFC触发方式、BFC作用介绍
一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...
- CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- 前端精选文摘:BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- BFC,定位,浮动,7种垂直居中方法
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
随机推荐
- linux下redis的安装、启动、关闭和卸载
edis 在Linux 和 在Windows 下的安装是有很大的不同的,和通常的软件安装是一样的. 一 下载 Redis 安装包 去redis 官网下载reids 安装包, redis 官网默认只提 ...
- java集合——Map
声明:以下内容都是来自网络总结,将会参考很多,没有声明转载来源. 一.Map接口 1.HashMap HashMap和HashTable的区别:http://blog.csdn.net/shohoku ...
- 使用SQL中的update更新多个字段值
使用SQL中的update更新多个字段值,set后面的条件要用逗号不能用and set后面的多个条件之间没有关联也不可以有关联,所以就不能用and了:where 条件后面 可以为and 如: upda ...
- 2018-2019-2 《网络对抗技术》Exp8 Web基础 Week11-12 20165233
Exp8 Web基础 目录 一.基础问题 二.实验步骤 实验点一:Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. 实验 ...
- spring boot + vue 前后分离实现登录功能(一)
使用webpack 打包初始化项目 vue init webpack book-vue 进入工程目录 cd hello-vue 安装 vue-router npm install vue-router ...
- 性能监控 | MAT分析内存泄漏
使用MAT分析内存泄漏(二)八周年重印版 - 知乎 .u-safeAreaInset-top { height: constant(safe-area-inset-top) !important; h ...
- vue 引入公共css文件
1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...
- 关于浏览器请求PHP一次请求执行了两次
测试同学今天又双叒反馈了一个Bug 继上次解决了重复请求的问题之后,本来就以为可以万事大吉了,没想到我还是太年轻了,测试同学说,不行啊,老哥,你这个我点击了一次创建居然创建出来两条数据!!并且查看日志 ...
- 猎豹网校C++ Primer学习笔记2
14.数组 数组定义时的长度必须是在编译时就能确定的值. 全局数组会自动初始化为0. size_t 15.指针 其指向类型要相同. 指针和引用: 指针可以先不初始化,可以修改指向.有指针的指针. 16 ...
- <JavaScript>使用onmousemove事件实现移动(拖拽)div 出现的关于offsetX的问题
出现的问题如下图所示(截屏看不出来看log) 再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置,回到左上角. 我以为是冒泡机制导致的所以添加了下面一段阻止冒泡,随便也阻止了默认事件,但 ...