BFC块级格式上下文，独立的一个渲染区域

1、同一个BFC的两个相邻盒子间的margin会重叠（垂直方向）；

2、BFC内部的盒子在垂直方向上会一个接一个的放置；

3、每个子元素的左外边距与包含块的左边界相接触；

4、计算BFC的高度时，浮动子元素也参与计算；

5、BFC内部的子元素不会受到外面元素的影响；

6、BFC的区域不会与float的元素区域重叠；

触发BFC条件：

float：不为none；

overflow的值不为visible；

display：inline－block，table－cell，table－caption；

position：不为relative 和 static

哪些元素会产生BFC

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

如果一个浮动元素后面紧跟一个非浮动的元素，那么就会有一个覆盖的对象，这时可对后面非浮动元素设置overflow：hidden触发BFC，或者设置padding－left：浮动元素的宽度

BFC块级格式上下文的更多相关文章

  1. BFC块级格式上下文介绍

    块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒 ...

  2. BFC——块级格式上下文

    BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身 ...

  3. BFC块级格式

    BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左 ...

  4. 什么是BFC（块级格式上下文）？

    ㈠什么是BFC? BFC 全称为 块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, ta ...

  5. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  6. CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  7. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  8. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  9. CSS--理解块级格式上下文（BFC）

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

随机推荐

  1. ng-clip angualr 的copy功能

    每次写博客都想由衷的给我的老大膜拜一番!以前刚开始做angular的项目的时候就有说要有点击复制的功能因为当时菜啊,不懂啊.也就没做,今天老大又给了我一个资料!“ng-clip”.跟着老大最大的收获就 ...

  2. c#XML操作类的方法总结

    using System.Xml;using System.Data; namespace DotNet.Utilities{    /// <summary>    /// Xml的操作 ...

  3. pyqt样式表语法笔记(下)--原创

    pyqt样式表语法笔记(下) python 启动界面 QSS pyqt 一.启动界面的设置 简单点~说话的方式简单点用一张静态图片作为程序启动界面为例. 原来的语句     python    7行 ...

  4. Webpack 速成

    前言 如果你已经对Webpack精通了或者至少一直在工作中使用它,请关闭当前浏览器标签,无视这篇文章. 这篇文章本意是写给我自己看的,作为一篇Cookbook供快速查询和上手用.原因是虽然工作中会涉及 ...

  5. 网页html结构搭建方法总结

    在div+css布局中,一般都这样来整体构架的: <div id="header"></div><div id="center"& ...

  6. 抛弃vue-resource拥抱axios

    vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...

  7. Androidstudio2.0.0下载，欢迎下载

    Androidstudio开发工具很实用,但是没了Google下载还是蛮麻烦的,所以呢Eric就向大家提供了下载的地址,其实就是从自己网盘考过来的,大家可以下载的. http://pan.baidu. ...

  8. JavaWeb总结(五)—Cookie

    一.会话 1.提出问题 HTTP协议是一种无状态的协议.Web服务器本身不能识别哪些请求是同一浏览器发出的,浏览器的每一次请求都是孤立的.即使HTTP1.1支持持续连接,但当用户有一段时间没有提交请求 ...

  9. PHPCMS笔记第二弹

    熟练地使用PHPCMS可以插入模板,将静态站转变为动态站也更加方便,多加练习还是有好处的 将index.html的头和尾拆分出来,分别放在header.html和footer.html文件夹中,这三个 ...

  10. Apache URL重写规则

    1.简介 Apached的重写功能,即是mod_rewrite模块功能,它是apache的一个模块.它的功能非常强大,可以操作URL中的所有部分. 因此我们就可以改写url,给用户提供一个简介大方的u ...