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. Python全栈之路----常用模块----软件开发目录规范

    目录基本内容 log  #日志目录 conf  #配置目录 core/luffycity  #程序核心代码目录  #luffycity 是项目名,建议用小写 libs/modules  #内置模块 d ...

  2. Python全栈之路----常用模块----序列化（json&pickle&shelve)模块详解

    把内存数据转成字符,叫序列化:把字符转成内存数据类型,叫反序列化. Json模块 Json模块提供了四个功能:序列化:dumps.dump:反序列化:loads.load. import json d ...

  3. flask中注册验证码和分页

    注册验证码.核心思路,替换注册页面的img标签的src属性. 1.准备好文件夹:captcha2.导包 from utils.captcha.captcha import captcha3.验证码生成 ...

  4. UVA - 558 Wormholes (SPEA算法模板题)

    先给出题面:https://vjudge.net/problem/UVA-558 题意描述:给你含n个点以及m条边的图,让你判断在这个图中是否存在负权回路. 首先,我们来介绍什么是SPEA算法 SPF ...

  5. 新 radio样式修改

    https://blog.csdn.net/qq_41617704/article/details/80973966

  6. 对于Vue的v-if 和 v-showi

    V-if   : 1. 是条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建. 2. 是惰性的,如果初始渲染条件为假,则什么都不做,直到条件第一次变为真的时候,开开始渲染 ...

  7. Appium环境搭建——安卓真机调试注意点

    1.安卓设备连接失败 通过adb devices命令 查看安卓设备的连接情况,如图,未成功连接 解决方法: (1)关闭360安全卫士和360手机助手(2)查看5037端口是否被占用 netstat - ...

  8. 网络操作基础（one）

    P12 一.什么是网络操作系统?网络操作系统具有哪些基本功能? 二.网络操作系统具有哪些特征? 三.常用的网络操作系统有哪些?它们各具有什么特点? 四.在网络操作系统中主要可提供哪些? ———— —— ...

  9. Python 二分法

    # coding = utf-8 import random def Creat_Arr(): arr = [] for i in range(0,50) : arr.append(random.ra ...

  10. 2017第八届蓝桥杯C/C++语言A组

    一:题目: 标题:迷宫 X星球的一处迷宫游乐场建在某个小山坡上.它是由10x10相互连通的小房间组成的. 房间的地板上写着一个很大的字母.我们假设玩家是面朝上坡的方向站立,则:L表示走到左边的房间,R ...