这几天都没有写博客,自己的懒惰又要跑出来了,发觉不能再这样下去了,不然就什么都不想干了,然后将之前已经写得差不多的博客重新检视了一遍。这篇博客已经写得挺久的了,但是一直没有发布,现在补充了一些,也让自己回顾了一下BFC布局。

BFC的全称是block formatting context(块级格式上下文), 它是指一个独立的块级渲染区域,该区域拥有一套渲染规则来约束块级盒子的布局,并且与区域外部无关。那么怎样才能触发BFC呢?

一。根元素

二。float的值为left或right

三。overflow的值为hidden

四。display的值为inline-block,table-cell,table-capation,flex

五。position的值为absolute或fixed

为什么我们会使用BFC布局呢?我们都知道BFC是指独立的块级渲染区域,既然是独立的,说明内部与外部互不干扰,这就避免了相邻块级元素的margin覆盖,当然还有一个长处是可以包含浮动元素。

我想做前端开发的都对IE恨之入骨,可惜IE是永远存在的痛。IE的haslayout与BFC具有很多相似之处,一个元素有没有布局就是通过haslayout告诉浏览器,如果有布局,haslayout的值就是true,反之就是false。那么如何触发layout呢?

一。display:inline-block

二。float:left / right

三。position:absolute / fixed

四。zoom:1

五。overflow:hidden

考虑到浏览器的兼容性和对元素的影响,建议使用zoom:1来触发layout

BFC布局的更多相关文章

  1. 前端BFC布局学习

    BFC,全称为(Block formatting context).按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果. Block Formatting Contexts翻译为:块级元 ...

  2. BFC布局原理

    写这篇博客的初衷其实是在解决浮动的时候看到的这个方法,就想着BFC是什么,为什么可以清除浮动.结果不看不知道,一看越看越不明白,潜下心来研究看看,总结一下学习心得. 1.BFC是什么 BFC就是Box ...

  3. 一天搞定CSS:BFC布局与普通文档流布局比较--15

    BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级( ...

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

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

  5. 浅析前端BFC布局

    一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-leve ...

  6. css BFC布局及用处

    http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html 这篇文章讲的很简单很实用

  7. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  8. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  9. CSS布局之BFC和IFC

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6708358.html <这是一篇css2-3的布局规 ...

随机推荐

  1. 敏捷转型历程 - Sprint3 Planning

    我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...

  2. Windows下Redis缓存服务器的使用 .NET StackExchange.Redis Redis Desktop Manager

    Redis缓存服务器是一款key/value数据库,读110000次/s,写81000次/s,因为是内存操作所以速度飞快,常见用法是存用户token.短信验证码等 官网显示Redis本身并没有Wind ...

  3. java中判断字符串是否为只包含数字

    1.用Java自带的函数 public static boolean isNumeric(String str){ for(int i=str.length();--i>=0;){ if (!C ...

  4. MySQL基础之索引

    这段时间看了好多东西却没有总结,今天在这里写一写 关于索引 索引是一种提高查询效率的方法,它是B+树的结构,从根到中间节点在到叶子节点,无需遍历全部就可以查到所需的东西 关于索引的创建 一般有俩种方式 ...

  5. Jquery初学

    Jquery相当于JS的升级版它俩语法是一样的,把JS的很多功能封装了起来,用的也是JS语言写的,也支持JS的语法,可以混着使用,用起来方便简单 用Jquery的时候要引用一个Jquery包 带min ...

  6. salesforce 零基础学习(五十七)Test 类中创建TestUser帮助类

    我们写Test Class的时候往往都需要指定一个uesr去run test method. TestUserHelper类如下: public class TestUserHelper { publ ...

  7. [原创]mybatis详解说明

    mybatis详解 2017-01-05MyBatis之代理开发模式1 mybatis-Dao的代理开发模式 Dao:数据访问对象 原来:定义dao接口,在定义dao的实现类 dao的代理开发模式 只 ...

  8. C#学习总结之集合

    一.集合接口和类型 命名空间:  集合类型  命名空间  一般集合 System.Collections   泛型集合 System.Collections.Generic   特定类型集合 Syst ...

  9. backup3:master 数据库的备份和还原

    在SQL Server 中,master 数据库记录系统级别的元数据,例如,logon accounts, endpoints, linked servers, and system configur ...

  10. 解析大型.NET ERP系统 权限模块设计与实现

    权限模块是ERP系统的核心模块之一,完善的权限控制机制给系统增色不少.总结我接触过的权限模块,以享读者. 1 权限的简明定义 ERP权限管理用一句简单的话来说就是:谁 能否 做 那些 事. 文句 含义 ...