简单介绍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. python3编程基础之一：程序结构

    程序从程序入口进入,到程序执行结束,大体是按照顺序结构执行语句.函数或代码块,掌握程序的结构,有利于把握程序的主体框架. 1.顺序结构--最常见的结构 顺序结构的程序设计是最简单的,只要按照解决问题的 ...

  2. indexOf的用法

    A.indexOf(B)="-1"表示的是不存在 不等于-1就表示存在 http://www.w3school.com.cn/jsref/jsref_indexOf.asp 没有出 ...

  3. elasticsearch bootstrap.memory_lock

    检查bootstrap.memory_lock设置是否生效 get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall 响应: { " ...

  4. 20175313 张黎仙《获奖感想与Java阶段性学习总结》

    一.获奖感想 很荣幸能够成为为数不多的小黄衫获得者之一,这是对我近一学期以来学习成果的肯定,也激励着我更加努力学习. 首先我要感谢的人就是娄嘉鹏老师.我曾在师生关系中提到,我认为的好老师的特点之一是: ...

  5. zsh: no matches found

    具体原因: 因为zsh缺省情况下始终自己解释这个 *.h,而不会传递给 find 来解释. 解决办法: 在~/.zshrc中加入: setopt no_nomatch, 然后进行source .zsh ...

  6. 在基于acpi的linux系统上如何检查当前系统是否支持深度睡眠？

    答: 执行以下命令: # dmesg|grep -i acpi |grep -i supports (S3表示支持深度睡眠) ACPI: (supports S0 S1 S3 S4 S5)

  7. java 获取String中的数字

    随便给你一个含有数字的字符串,比如: String s="eert343dfg56756dtry66fggg89dfgf"; 那我们如何把其中的数字提取出来呢?大致有以下几种方法, ...

  8. Jupyter Notebook 远程连接配置（转载）

    转载博客的Jupyter Notebook远程连接配置方法. 0 - 参考资料 https://www.jianshu.com/p/08f276d48669?utm_campaign=maleskin ...

  9. pytorch中的学习率调整函数

    参考:https://pytorch.org/docs/master/optim.html#how-to-adjust-learning-rate torch.optim.lr_scheduler提供 ...

  10. （十一）使用Jconsole监控线程

    一.案例 监控线程情况,包括阻塞.死循环等 1.1 代码如下,下述代码共有三个线程,Main.mythread01.mythread02线程,其中mythread01线程为死循环.mythread02 ...