作用

1、清浮动

2、不被浮动元素覆盖

3、阻止父子margin传递

触发条件：

1、float不为none

2、position不为static或relative

3、display：inline-block、table-cell、tabel-caption

bfc作用的更多相关文章

  1. BFC的概念、BFC触发方式、BFC作用介绍

    一.BFC的概念 GFC——block fomatting context(中文译为块级格式化上下文) 二. 如何触发BFC 1. 设置 float 除 none 以外的值(left.right) 2 ...

  2. 浅析BFC布局的概念以及作用

    BFC的概念以及作用 BFC的定义: (Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与 ...

  3. CSS--理解块级格式上下文（BFC）

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

  4. 浅析前端BFC布局

    一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-leve ...

  5. CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC

    display常用值 参考链接英文参考链接中文 // 常用值 none:元素不显示 inline:将元素变为内联元素,默认 block:将元素变为块级元素 inline-block:将元素变为内联块级 ...

  6. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  7. css详解笔记

    CSS中的块级元素与行内元素 块级元素特性: 1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示. 2.内联元素特性: 3.和其他内联元素显示在同一行. 块级元素列举如下: div(文档分区 ...

  8. html css 笔记

    cursor其他取值 鼠标移入    auto          :标准光标    default        :标准箭头    pointer        :手形光标    wait       ...

  9. css 的一些知识点的整理

    css的一些标签整理   background-attachment: scroll;背景图可滚动 background-attachment: fixed; 固定背景的位置,不随着滚动条移动而移动 ...

随机推荐

  1. Flume基础学习

    Flume是一款非常优秀的日志采集工具.支持多种形式的日志采集,作为apache的顶级开源项目,Flume再大数据方面具有广泛的应用 首先需要在Flume的解压目录中conf文件夹中将flume-en ...

  2. 设置textarea不可拉伸

    默认情况下,我们将鼠标移动到textarea的右下角时发现文本域是可以通过拖动的方式改变其大小的,这会影响我们原本的页面布局.若想设置其不可拖动,可为其添加如下属性: style="resi ...

  3. 面试问烂的 Spring AO，全文详解

    本人免费整理了Java高级资料,涵盖了Java.Redis.MongoDB.MySQL.Zookeeper.Spring Cloud.Dubbo高并发分布式等教程,一共30G,需要自己领取.传送门:h ...

  4. Yii2.0 引入外部js css

    <script src="<?= Yii::$app->request->baseUrl . '/js/jquery-2.1.1.min.js'?>" ...

  5. 命令行选项解析函数getopt()

    1.定义: int getopt(int argc, char * const argv[], const char *optstring); 2.描述: getopt是用来解析命令行选项参数的,但是 ...

  6. 「CF858F」 Wizard's Tour

    传送门 Luogu 解题思路 首先对于树的情况,我们很显然有一种贪心策略: 对于每一个节点先匹配子树,然后在还可以匹配的儿子间尽可能匹配,要是多出来一个就往上匹配. 推广到图的情况... 我们在图的生 ...

  7. BeanUtils学习笔记

    一. 简介 BeanUtils提供对Java反射和自省API的包装.其主要目的是利用反射机制对JavaBean的属性进行简化操作处理.一个JavaBean通常包含了大量的属性,很多情况下,对JavaB ...

  8. pytest+allure(allure-pytest基于这个插件)设计定制化报告

    一:环境准备 1.python3.6 2.windows环境 3.pycharm 4.allure-pytest 5.allure2.8.0 6.java1.8 allure-pytest快速安装 在 ...

  9. java集合知识点

    若不重写equals方法,则调用的是object对象的equals方法,相当于==比较,比较的是对象的内存地址 |------Collection接口:单列集合,用来存储一个一个对象 |------L ...

  10. Codeforces Round #606 (Div. 2) - E. Two Fairs(割点+dfs)

    题意:给你一张无向连通图,对于求有多少对$(x,y)$满足互相到达必须经过$(a,b)$,其中$x\neq a,x\neq b,y\neq a,y\neq b$ 思路:显然$a,b$都必须为割点,所以 ...