简单介绍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. Docker实战笔记

    好记性不如烂笔头,持续高产~ 0x01 Docker创建nginx容器 1.流程 docker info 显示Docker系统信息,包括镜像和容器数 示例: 使用镜像 nginx:latest 以交互 ...

  2. Jira5.2.8 安装

    第一步. 安装jira 1. 运行安装包,选择自定义安装 2. 最好使用netstat -ano检查一下端口是否被占用,如果占用就选其他的靓号吧~ 3. 选择集成数据库 输入应用的名称 第二步. 破解 ...

  3. 走进JavaWeb技术世界14：通过项目逐步深入了解Mybatis（一）

    通过项目逐步深入了解Mybatis(一) 2017-06-12 文章导航 Mybatis 和 SpringMVC 通过订单商品案例驱动 官方中文地址:http://www.mybatis.org/my ...

  4. TripleDES加解密Java、C#、php

    TripleDES说明:     TripleDES(3Des)和Des都是对称加密算法,TripleDes是Des加密算法的增强版本,这里主要说的是TripleDes加密算法的应用.     工作中 ...

  5. postman测试API

    首先创建环境变量 再次在请求参数中,可以应用环境变量,只需要在地址中引用环境变量即可 将返回的参数设置到环境变量中 如已经设置好环境变量,在认证中,选择Bearer Token,然后设置Token为环 ...

  6. 微信小程序 位置定位position详解，相对定位relative，绝对定位absolute相关问题

    一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...

  7. 【转载】 AutoML总结

    原文地址: https://jinxin0924.github.io/2017/12/21/AutoML%E6%80%BB%E7%BB%93/ Posted by JxKing on December ...

  8. osg 3ds模型加载与操作

    QString item1 = QString::fromStdString(groupParam->getChild(k)->getName()); QStandardItem* ite ...

  9. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_02-用户认证技术方案-单点登录

    2 用户认证技术方案 2.1 单点登录技术方案 分布式系统要实现单点登录,通常将认证系统独立抽取出来,并且将用户身份信息存储在单独的存储介质,比如: MySQL.Redis,考虑性能要求,通常存储在R ...

  10. 置BAT批处理窗口显示颜色

    置BAT批处理窗口显示颜色 摘自:https://blog.csdn.net/tp7309/article/details/53450131 2016年12月04日 01:08:33 亦游 阅读数:1 ...