作用

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. vue中watch和computed为什么能监听到数据的改变以及不同之处

    先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...

  2. JavaScript自学笔记（1）---表单验证，let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  3. flask使用websocket

    # flask使用websocket 1.概述 flask实现websocket有两种方式:flask_sockets,Flask-SocketIO. flask_sockets:该方式是flask对 ...

  4. hibernate并发时的事务处理

    两个方法 方法一: public void saveTest() { try { System.out.println("saveTest start"); User user = ...

  5. VMWare tools

    一.首先是安装VMWare tools1.以ROOT身份进入LINUX2.在虚拟机软件VMWARE状态栏中,点击 SETTING菜单下的ENABLE VMWARE TOOLS子菜单,此时在linux的 ...

  6. 第八届极客大挑战 Web-故道白云&Clound的错误

    web-故道白云 题目: 解题思路: 0x01 首先看到题目说html里有秘密,就看了下源代码如图, 重点在红圈那里,表示输入的变量是id,当然上一行的method=“get”同时说明是get方式获取 ...

  7. ASP.NET Core搭建多层网站架构【9.1-使用Autofac代替原生的依赖注入】

    2020/01/30, ASP.NET Core 3.1, VS2019, Autofac.Extensions.DependencyInjection 5.0.1 摘要:基于ASP.NET Core ...

  8. input输入框type设置为number，maxlength无效

    一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...

  9. 基于scikitlearn的深度学习环境安装(三)(完整版)

    OS Linux  Ubuntu14.04 安装 pip (python2.7.9或以上自带pip) sudo apt-get install python-pip pip是python环境下安装包的 ...

  10. Spring Boot 定时任务 Quartz 使用教程

    Quartz是一个完全由java编写的开源作业调度框架,他使用非常简单.本章主要讲解 Quartz在Spring Boot 中的使用. 快速集成 Quartz 介绍 Quartz 几个主要技术点 Qu ...