作用

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. 6_2 铁轨（UVa514）<栈>

    在一个叫「堆叠市」的城市中有一个有名的火车站.由于地形限制以及经费的关系,火车站及唯一的铁路的样子如下图: 现在火车从A方向来,预定从B方向离开.火车共有N节车厢(N <=1000),并且各车厢 ...

  2. CI 框架批量添加数据（如果数据库有就更新数据）

    model: public function insert_select($values) { $sql = 'INSERT INTO ' . $this->_table_name . '(ar ...

  3. 解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题

    官方说明链接: https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000736584-SciView-in-PyCh ...

  4. Codeforces Round #601 (Div. 2)D（蛇形模拟）

    #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; vector<char>an ...

  5. 【C语言】将输入的10个数排序

    代码: #include <stdio.h> int main() { ], t; int i, j, max; printf("请输入10个数:\n"); ; i & ...

  6. js中的局部函数和全局函数的调用

    //局部函数和全局函数的特点 function fc1(){ var name ="chenhao"; function fc2(){ var age = 30; alert(na ...

  7. 使用MQTT.fx客户端接入阿里云

    一.前期准备. 1.关于MQTT连接的属性:https://www.cnblogs.com/mhtc/p/11112153.html 2.关于阿里云配置工具的使用:https://www.cnblog ...

  8. abp方法权限

    一.自定义一个权限实体,也可以直接用abp的PermissionNames类 二.重写PermissionChecker中的IsGrantedAsync方法 public override async ...

  9. ASP.NET Core搭建多层网站架构【10-使用JWT进行授权验证】

    2020/01/31, ASP.NET Core 3.1, VS2019, Microsoft.AspNetCore.Authentication.JwtBearer 3.1.1 摘要:基于ASP.N ...

  10. ABC156D

    [题目链接]https://atcoder.jp/contests/abc156/tasks/abc156_d 简单数论问题,题意就是有n个数,不能组成a与b个数,问有多少种组合方式 那就是C(n,1 ...