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（块级格式化上下文）的更多相关文章

  1. CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  2. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  3. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  4. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

  5. 我理解的BFC(块级格式化上下文)

    BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...

  6. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  7. BFC(块级格式化上下文)笔记

    BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...

  8. BFC 详说 Block Formatting Contexts (块级格式化上下文)

    定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...

  9. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

随机推荐

  1. CSS学习笔记_day3

    一.浮动的清除 1.给祖先元素加高度 <style> * { padding: 0; margin: 0; } .box1 { height: 100px; /**/ } ul { /*去 ...

  2. 从码云上下载react项目并配置成可运行状态

    (第一次写,如有不足之处,欢迎指出) 一.下载项目: 1.首先保证安装了git, 2.然后在本地想要存放项目位置打开git(Git Bash Here),再复制码云中如图所示的地址: 3.在git中输 ...

  3. Vue基础之数据绑定

    我们学习一门新语言或者框架时,第一件事是什么呢,那必然是向世界say Hello. 创建一个Vue应用 话不多说,先上代码,让我们感受一下Vue的核心功能 <!DOCTYPE html> ...

  4. 关于nginx安装、iptables设置和查看端口指令netstat/ss

    实验1: Nginx介绍 Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP ...

  5. python八荣八耻

    Python八荣八耻 以动手实践为荣 , 以只看不练为耻; 以打印日志为荣 , 以单步跟踪为耻; 以空格缩进为荣 , 以制表缩进为耻; 以单元测试为荣 , 以人工测试为耻; 以模块复用为荣 , 以复制 ...

  6. Linux第二节课学习笔记

    虚拟机不一定要安装12版本,但仅有12版本支持RHCE模拟考试环境,激活码可以百度. 在创建新的虚拟机过程中,安装客户机操作系统时需要选择稍后安装操作系统,否则会默认最小化安装导致后面课上很多命令不能 ...

  7. Poj2688cleaningrobot

    这道题让我们求一个地图上的各个点之间的最短路径说白了旅行商问题. 那么我们先用一个裸的BFS求出各个点之间的最短距离,然后我们再枚举各个点的全排列即可 这道题的细节很多,详见注释 上代码~ #incl ...

  8. 30天学会绘画 (Mark Kistler 著)

    第一课 球形 (已看) 第二课 重叠的球 (已看) 第三课 更多排列的球 (已看) 第四课 立方体 (已看) 第五课 空心立方体 (已看) 第六课 堆放的桌子 (已看) 第七课 堆放更多的立方体 (已 ...

  9. python中使用redis实战

    from redis import StrictRedis rds = StrictRedis(host='127.0.0.1', port=6379, db=0, decode_responses= ...

  10. Taro 代码及功能，需要注意的地方

    Taro 代码不能使用的写法: 请注意无 AppID 关联下,调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回