BFC(块级格式化上下文)笔记
BFC特性:
1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然。
2.计算BFC高度时,会计算内部的浮动元素。
3.BFC会阻止外边距的合并。
4.BFC的区域不会与外部浮动元素的区域重叠
触发条件:
1. float不为none
2.position: fixed absolute
3.overflow: hidden scroll auto
4.display: inline-block/ table-cell/ table-caption / flex /inline-flex
应用场景:
1.子元素浮动导致父元素坍塌(用于清除浮动,运用特性2)
2.上下margin合并问题 (运用特性3)
3.左右两栏自适应布局( 运用特性4)
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(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
- css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )
平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...
- 详解块级格式化上下文(BFC)
相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...
随机推荐
- CSGO控制台命令
转帖: 按下“~”即可开启 使用时先输入参数名 然后按下SPACE空出一格 再输入设定值即可 一般玩家进入游戏都只能用到Client(玩家用参数) 不过...如果你是开LAN GAME的人 就能进阶到 ...
- abp集成IdentityServer4和单点登录
在abp开发的系统后,需要使用这个系统作单点登录,及其他项目登录账号依靠abp开发的系统.在官方文档上只找到作为登录服务Identity Server Integration,但是host项目却无法使 ...
- css的三种导入方式
内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type= ...
- The Ether 靶场
0x01 首先对靶场进行端口扫描 发现只开启了80端口和22端口 0x02 目录扫描 访问了几个目录并没有什么发现 0x03 访问主页几个网站链接 发现了一个疑似文件包含的漏洞 0x04 抓包进行分析 ...
- cf999E (强联通分量模板题)
给出n个点m条边的有向图,问至少添加多少条边使得任何点都可以从s点出发可达 #include<bits/stdc++.h> #define forn(i, n) for (int i = ...
- 从表单驱动到模型驱动,解读低代码开发平台的发展趋势 ZT
原文地址:https://www.grapecity.com.cn/blogs/read-the-trends-of-low-code-development-platforms 随着社会数字化进程的 ...
- XSS之Beef的使用
0x01 Beef简介 BeEF是The Browser Exploitation Framework的缩写.它是一种专注于Web浏览器的渗透测试工具. beef管理.挂钩web浏览器的过程: 生成交 ...
- ubuntu 安装mysql数据库
apt方式安装 官网参考: https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/ 执行命令: sudo wget https://dev.m ...
- GCD相关
板子: ? gcd(b, a % b) : a; } POJ1930 题意:给你一个无限循环小数,给到小数点后 9 位,要求这个数的分数形式. 解法: 要想解决这道题,首先应该了解如何将循环小数化为分 ...
- 面试再问ThreadLocal,别说你不会!
ThreadLocal是什么 以前面试的时候问到ThreadLocal总是一脸懵逼,只知道有这个哥们,不了解他是用来做什么的,更不清楚他的原理了.表面上看他是和多线程,线程同步有关的一个工具类,但其 ...