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. excel 格式化姓名

                在做excel时,难免会遇到输入姓名对齐这种情况,如果数据少时我们可以手动敲空格来进行对齐,但数据量大时,手动调整就不是好办法了.     此时我们可以通过excel自带公式对 ...

  2. react native 键盘弹起时必须点击两次才能成功

    在scrollview或者flatlist上设置一个参数,即可解决 keyboardShouldPersistTaps="handled"

  3. jmeter 写正则表达式

    ():括起来的部分就是要提取的. .:匹配任何字符串. +:一次或多次. ?:不要太贪婪,在找到第一个匹配项后停止.   需要根据要取的数据取值 jt: eyJhbGciOiJSUzI1NiJ9.ey ...

  4. SQLI DUMB SERIES-13

    (1)检测闭合方式 通过 ') 闭合. (2)尝试输入 admin')# 无回显.尝试报错注入, 爆表payload: admin') and extractvalue(1,concat(0x7e,( ...

  5. vue H5页面在微信浏览器打开软键盘关闭导致页面空缺的问题。

    methods:{ inputBlur () { // window.scroll(0, 0); setTimeout(() => { // alert(1); if (document.act ...

  6. CCS的文本及字体

    1.文本 CSS 文本属性可定义文本的外观 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文 ...

  7. 用雷达统计成绩单、numpy、matplotlib的使用

    #e19.1DrawRadar import numpy as np import matplotlib.pyplot as plt import matplotlib matplotlib.rcPa ...

  8. 闲记 单元格与单元格之间的边 ///字体属性都是font开头，除了颜色属性 ///文本属性都是text开的，除了设置行高。

    这两天一直在做网页没有什么太大的问题,期间也考了一场试,对答案的时候老师讲了一些小知识,因此来记录一下. 单元格与单元格之间的边距(cellspaling) list-type-image可以使用图像 ...

  9. LeetCode - Min Remaining Chess Pieces

    假设有一个棋盘(二维坐标系), 棋盘上摆放了一些石子(每个石子的坐标都为整数). 你可以remove一个石子, 当且仅当这个石子的同行或者同列还有其它石子. 输入是一个list of points. ...

  10. bootstrap简单使用实例

    表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...