简单介绍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. 修改rabbitmq web-UI端口号

    一.拷贝配置文件 [root@test03 ~]# cd /usr/share/doc/rabbitmq-server-3.6.15/ [root@test03 rabbitmq-server-3.6 ...

  2. hdfs-site.xml 基本配置参考

    配置参数: 1.dfs.nameservices 说明:为namenode集群定义一个services name 默认值:null 比如设置为:ns1 2.dfs.ha.namenodes.<d ...

  3. 获取Linux系统运行时间

    uptime |sed 's/^.*up//' |sed 's/users.*//g'|awk '{for(i=1;i<NF;++i) printf $i "\t";prin ...

  4. docker 笔记--运行中的容器如何添加端口映射

    解决: iptables -t nat -A DOCKER -p tcp --dport ${YOURPORT_1} -j DNAT --to-destination ${CONTAINERIP}:$ ...

  5. meshing-圆锥网格划分

    原视频下载地址: https://pan.baidu.com/s/1boSjGXh 密码: 9zis

  6. Collections用法总结

    Collections是一个包装类,其中包含有各种有关集合操作的静态多态方,比如可以作用在List和Set上,此类不能实例化. 排序Integer[] array = new Integer[]{3, ...

  7. madam、Linux LVM的使用

    .RaidRAID(独立冗余磁盘阵列)概念:RAID技术通过把多个硬盘设备组合成一个容量更大.安全性更好的磁盘阵列,并把数据切割成多个区段后分别存放在各个不同的物理硬盘设备上,然后利用分散读写技术来提 ...

  8. SQL-W3School-函数:SQL HAVING 子句

    ylbtech-SQL-W3School-函数:SQL HAVING 子句 1.返回顶部 1. HAVING 子句 在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使 ...

  9. SAP R3和SAP Business One的区别

    SAP R3是SAP开发的 开发语言是ABAP. 之前叫SAP R/2 然后叫R/3 后又改叫ECC 现在叫A1了. 现在有新的版本S4 HANA : SAP发展史 SAP Business One是 ...

  10. iOS定时器按钮短时间内多次点击只触发一次事件方法

    今天在看别人代码的时候,有个个60秒获取验证码的功能,做了个定时器,按钮触发定时器,点击按钮后设置按钮的enabled为NO,逻辑来讲都是没问题的 但是实际操作的时候,恶意的在短时间内多次点击那个获取 ...