简单介绍BFC

　BFC

　　就是块级格式化上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

　创建 BFC 的方式有：

　　1.html的根元素

　　2.float浮动

　　3.绝对定位

　　4.overflow不为 visible

　　5.display为表格布局或弹性布局

　　6.contain值为layout

　　7.content或 strict的元素等。

　

　BFC的作用：

　　1.清除浮动

　　2.解决margin塌陷问题

　

　BFC的特点：

　　1.内部box会一个一个的垂直放置

　　2.形成了BFC的区域不会与float box重叠，BFC在页面是个独立的容器，里外元素互不影响

　　3.BFC在计算高度时会把浮动元素计算进去

　　4.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

BFC的作用及其应用的更多相关文章

  1. 【转】浅析BFC及其作用

    1. 什么是BFC BFC(block formatting context):简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 中文译为块级格式化上下文.是 ...

  2. 浅析BFC及其作用

    本文链接:https://blog.csdn.net/riddle1981/article/details/52126522

  3. BFC的概念及作用

    在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...

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

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

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

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

  6. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  7. 前端精选文摘：BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  8. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  9. BFC,定位，浮动，7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. Cannot initialize a variable of type 'Stu *' with an rvalue of type 'void *'

    code: 将 Stu* pStu = malloc(sizeof(Stu)); 改为Stu* pStu = (Stu*)malloc(sizeof(Stu)); code #include < ...

  2. Jetty - Unable to compile class for JSP

    问题与分析 在启动公司项目时发现报错如下: [jetty] 2019-10-07 10:28:28.760:WARN:org.apache.jasper.compiler.Compiler:Error ...

  3. 小程序开发--API之登录授权逻辑

    小程序登录授权获取逻辑 原生的小程序提供许多开放接口供使用者开发,快速建立小程序内的用户体系. 下面将小程序校验.登录.授权.获取用户信息诸多接口串联起来,以便更直观的认识到这些接口是如何在实际应用中 ...

  4. 2018-2019-2 网络对抗技术 20165311 Exp 8 Web基础

    2018-2019-2 网络对抗技术 20165311 Exp 8 Web基础 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt 3.Web后端:MySQL基础 ...

  5. Echarts 常用API之action行为

    一.Echarts中的action echarts中支持的图表行为,通过dispatchAction触发. 1.highlight 高亮指定的数据图形 dispatchAction({ type: ' ...

  6. Mininet系列实验（三）：Mininet命令延伸实验扩展

    1 实验目的 熟悉Mininet自定义拓扑三种实现方式:命令行创建.Python脚本编写.交互式界面创建. 2 实验原理 Mininet 是一个轻量级软件定义网络和测试平台:它采用轻量级的虚拟化技术使 ...

  7. c语言复杂申明解释程序

    c语言复杂声明的解释 目标:分析一个将c语言复杂申明解释为英语的一个程序 首先介绍一种简单的读声明的方法,来源网络 1.右左法则 从标识符开始(或者最内层的结构,如果不存在标识符的话,通常出现于函数指 ...

  8. C# 客户端网络请求 对HttpClient的封装

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/a1037949156/article/d ...

  9. Feed流系统设计-总纲

    https://mp.weixin.qq.com/s/ccxM2thPbzg5vDWgGVJ5vQ 作者:少强 简介 差不多十年前,随着功能机的淘汰和智能机的普及,互联网开始进入移动互联网时代,最具代 ...

  10. Android中为什么主线程不会因为Looper.loop()方法造成阻塞

    很多人都对Handler的机制有所了解,如果不是很熟悉的可以看看我 如果看过源码的人都知道,在处理消息的时候使用了Looper.loop()方法,并且在该方法中进入了一个死循环,同时Looper.lo ...