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- ...
随机推荐
- 修改rabbitmq web-UI端口号
一.拷贝配置文件 [root@test03 ~]# cd /usr/share/doc/rabbitmq-server-3.6.15/ [root@test03 rabbitmq-server-3.6 ...
- hdfs-site.xml 基本配置参考
配置参数: 1.dfs.nameservices 说明:为namenode集群定义一个services name 默认值:null 比如设置为:ns1 2.dfs.ha.namenodes.<d ...
- 获取Linux系统运行时间
uptime |sed 's/^.*up//' |sed 's/users.*//g'|awk '{for(i=1;i<NF;++i) printf $i "\t";prin ...
- docker 笔记--运行中的容器如何添加端口映射
解决: iptables -t nat -A DOCKER -p tcp --dport ${YOURPORT_1} -j DNAT --to-destination ${CONTAINERIP}:$ ...
- meshing-圆锥网格划分
原视频下载地址: https://pan.baidu.com/s/1boSjGXh 密码: 9zis
- Collections用法总结
Collections是一个包装类,其中包含有各种有关集合操作的静态多态方,比如可以作用在List和Set上,此类不能实例化. 排序Integer[] array = new Integer[]{3, ...
- madam、Linux LVM的使用
.RaidRAID(独立冗余磁盘阵列)概念:RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,并把数据切割成多个区段后分别存放在各个不同的物理硬盘设备上,然后利用分散读写技术来提 ...
- SQL-W3School-函数:SQL HAVING 子句
ylbtech-SQL-W3School-函数:SQL HAVING 子句 1.返回顶部 1. HAVING 子句 在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使 ...
- SAP R3和SAP Business One的区别
SAP R3是SAP开发的 开发语言是ABAP. 之前叫SAP R/2 然后叫R/3 后又改叫ECC 现在叫A1了. 现在有新的版本S4 HANA : SAP发展史 SAP Business One是 ...
- iOS定时器按钮短时间内多次点击只触发一次事件方法
今天在看别人代码的时候,有个个60秒获取验证码的功能,做了个定时器,按钮触发定时器,点击按钮后设置按钮的enabled为NO,逻辑来讲都是没问题的 但是实际操作的时候,恶意的在短时间内多次点击那个获取 ...