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. spring cloud gateway的stripPrefix配置

    序 本文主要研究下spring cloud gateway的stripPrefix配置 使用zuul的配置 zuul: routes: demo: sensitiveHeaders: Access-C ...

  2. CCF-Crontab-201712-3

    大概是CCf第三题中最麻烦的一个吧 我的思路其实我觉得还可以,模拟...可是超时了233 只有90分 [ 可是我看网上其他人也是模拟算法啊, 速度还是太慢了 120行, 1个半小时  大部分花在了de ...

  3. SSH与MVC

    MVC是一个框架模式,它强制性的使应用程序的输入.处理和输出分开.使用MVC应用程序被分成三个核心部件:模型.视图.控制器.它们各自处理自己的任务.最典型的MVC就是JSP + servlet + j ...

  4. Go语言切片

    切片 Go 语言切片相当于是对数组的抽象. 由于Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组相比 ...

  5. 认识Applet

    一.Applet 1.Applet的定义:Applet是采用Java编程语言编写的小应用程序,该程序可以包含在HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同. Java写出 ...

  6. 学习笔记CB002:词干提取、词性标注、中文切词、文档分类

    英文词干提取器,import nltk,porter = nltk.PorterStemmer(),porter.stem('lying') . 词性标注器,pos_tag处理词序列,根据句子动态判断 ...

  7. 易忽视的Python知识点

    1.sort和sorted (1)sort:会直接修改原始列表的序列,只是排序,不去重. >>> a=[2,5,7,8,3,5,1,3,9,6,2] >>> a.s ...

  8. Oauth2手册 第一章

    来源:https://github.com/jeansfish/RFC6749.zh-cn/blob/master/SUMMARY.md 1. 简介在传统的客户端-服务器身份验证模式中,客户端请求服务 ...

  9. 2、冒泡排序法（C语言）

    一.冒泡算法实现分析 1.假设有5个元素分别为8,6,15,9,3对其进行冒泡排序,我们需要关注的有三点如下: (1)元素个数 n: (2)需要比较的趟数 i: (3)每趟比较的次数 j: 2.它们之 ...

  10. Apache HTTP Server 与 Apache Tomcat 的区别

    要明白他们之间的区别,我们首先需要明白HTTP协议.HTML页面.JSP.Servlet之间的区别和联系. HTTP协议是在TCP/IP协议之上的应用层协议,用以在客户端和服务器之间传递信息.一般传递 ...