基础总结(02)--BFC(块级格式化上下文)
BFC(块级格式化上下文)布局规则
1.元素垂直排列。
2.同一个BFC相邻两个元素的margin会重叠。
3.BFC区域不会与浮动元素重叠。
4.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
5.计算BFC的高度时,浮动元素也参与计算。
如何创建BFC
1.根元素
2.浮动float
3.absolute或fixed
4.overlfow部位visible
5.display为inline-block, table-cell, table-caption, flex, inline-flex
BFC多用来清除浮动、阻止外边距折叠、阻止元素被浮动元素覆盖(两列布局)
基础总结(02)--BFC(块级格式化上下文)的更多相关文章
- CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)
BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...
- BFC块级格式化上下文
BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...
- BFC——块级格式化上下文
BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...
- BFC块级格式化上下文简述
做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...
- 我理解的BFC(块级格式化上下文)
BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...
- BFC(块级格式化上下文)
转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...
- BFC(块级格式化上下文)笔记
BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...
- BFC 详说 Block Formatting Contexts (块级格式化上下文)
定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...
- BFC(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
随机推荐
- Maven&&Philosophy~
What is Maven? At first glance Maven can appear to be many things, but in a nutshell Maven is an att ...
- js Number string
Number string number Js只有一种数字类型(包括整型,浮点型) 极大或极小的可用科学计数法来表示.(7.7123e+1) 所有js数字均为64位 Js所有的数字都存储为浮点型 小数 ...
- CSS3中设置字体的抗锯齿或光滑度的属性
刚刚接触前端开发,对于-webkit-font-smoothing: antialiased; 这个属性不了解.上网查找了一些资料. 总结一下: -webkit-font-smoothing : ...
- 小妖精的完美游戏教室——东方PROJECT,同人,墙
//================================================================//// Copyright (C) 东方同人社// All Rig ...
- 使用JBolt新建Maven版工程步骤
一.打开新建对话框 在左侧右键new中可以找到JFinal创建工程的菜单 JBoltHome页面也有快捷按钮用来弹出创建工程对话框. 二.填写Maven和其他信息配置 填写工程name 主包名 下面有 ...
- 【转载】【SQL练习】经典SQL练习题
出处 https://blog.csdn.net/mrbcy/article/details/68965271 准备数据 建表语句 CREATE TABLE students (sno VARCHAR ...
- macbook远程连接报错no matching cipher found
在.ssh/目录下添加config文件 Host xxx.xxx.xxx.xxx Ciphers 3des-cbc KexAlgorithms +diffie-hellman-group1-sha1 ...
- linux下用ctrl+r快速搜索history命令
前提是,搜索已经使用的命令,否则是查不出来结果的. ctrl+r用途:反向搜索执行过的命令.(reverse-i-search) 1.任何目录下按住ctrl + r 2.输入历史命令中的字符串 ,比如 ...
- Centos系统快速添加yum源
我常用的yum源如下: 阿里云yum源:http://mirrors.aliyun.com/repo/Centos-7.repo 小红帽yum源:https://dl.fedoraproject.or ...
- 如何编译luabind支持vs2010之后所有版本
步骤 下载https://github.com/luabind/luabind/tree/0.9. 其最后一次commit为 Revision: 8c66030818f0eacbb7356c16776 ...