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. socket 简单了解

    网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.   建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(API),对TCP/IP的 ...

  2. SQLI DUMB SERIES-16

    (1)无论怎么输入,都没有回显,但当输入 admin")#时,显示登录成功.若通过其他方法获取数据库的用户名,可通过这个方法登录成功. (2)获取其他信息可用考虑时间延迟注入.方法同15.

  3. 12集合（1）-----List

    一.总体分类 Collection(包括方法add,remove,contains,clear,size) List(接口) LinkedList ArrayList Vector---Stack 2 ...

  4. slf4j的使用2

    一.Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行 ...

  5. 一个权重的物体拷贝权重给多个（oneWeightToMany）

    你是否在做项目的时候经常会遇见一个物体带权重需要拷贝给其他物体,这时候其他物体多的数不胜数 你怎么办呢? 举例:假如一头狮子 身体你已经做好了,但是模型师把半个身体都做满了垂落的实体模型毛发,你是否感 ...

  6. javascript 5.2

    window.open(url,name,features):创建新的浏览器窗口:url是窗口的地址,name是新窗口名字,features是新窗口的各种属性 真协议特指因特网上两台计算机之间传输各种 ...

  7. hello1 hello2 服务器安装加部署全过程

    1.安装maven和glassfish及配置环境变 首先搜索并下载maven3.6.0和glassfish4.1.1(版本看按需要选择). 点击安装包进行安装 安装完成后开始配置环境变量 打开系统环境 ...

  8. Centos搭建NFS服务及客户端访问

    一.环境介绍 NFS服务端:192.168.200.101 NFS客户端:192.168.200.102 二.服务器端安装配置 1.查看rpcbind和nfs-utils安装包是否安装 [root@b ...

  9. tomcat 发布后中文乱码问题

    接口收到数据,使用Eclipse运行调试中文正常显示,发布到Tomcat后中文出现乱码情况: 解决方法: tomcat启动时默认使用系统编码,可更改tomcat bin目录下catalina.bat文 ...

  10. Application、QueryString、session、cookie、ViewState、Server.Transfer等

    Application: WebForm1.aspx: protected void Button1_Click(object sender, EventArgs e) { ; Response.Re ...