关于由CSS2.1所提出的的BFC的理解与样例

  今天在这里谈谈css中BFC。“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。满足以下任何一条件,即可形成“BFC”。

1、float的值不为none。

2、overflow的值不为visible。

3、display的值为table-cell, table-caption, inline-block中的任何一个。

4、position的值不为relative和static。

  “BFC”的作用可以通过解决以下三个问题得到很好的体现:

问题一:避免和浮动元素重叠。如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,这时候我们可以通过以下方法解决,

    eg:

  <div style="float:left; border: 2px solid red"> 123</div>
  <div style="border: 2px solid blue;overflow:hidden;">
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
    qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
  </div>

  注:蓝色背景处是解决问题的关键。而这就属于通过创建一个“BFC”来解决布局问题。

问题二:清除元素的内部浮动。只要把父元素设为BFC就可以清理子元素的浮动了。然而对于IE6,需要加上zoom:1。在这里就会引出另一个概念:HasLayout,

    它是IE浏览器引擎内部特有的属性,它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时,这个元素才可以决定自己和其子孙   元素的布局。为数不多的元素默认这个属性值为true,包括:

  • body and html
  • table, tr, th, td
  • img
  • hr
  • input, button, file, select, textarea, fieldset
  • marquee
  • frameset, frame, iframe
  • objects, applets, embed

所以,当发现有些元素的布局在IE下有异常时,可以有充分的理由来怀疑可能是hasLayout属性为false。而且这个属性值不能直接设置。一个元素要么默认拥有,要  么通过设置特定的CSS属性来获取。

问题三:嵌套元素的margin边距折叠。

       按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空    内容,padding等)就会发生margin重叠。因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它    们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

  以上就是我现在对“BFC”的认识。

时间: 2024-10-09 03:30:48

关于由CSS2.1所提出的的BFC的理解与样例的相关文章

大开测试:性能—如何将Connect()中的密文改为明文(连载5)

7.5  如何将Connect()中的密文改为明文 1.问题提出 在VuGen以ODBC协议录制样例应用程序"Flights-ODBC_Access"业务流程后,发现生成脚本lrd_open_connection包含密文(如图7-10所示),能否将这些密文变成明文显示呢? 图7-10  包含密文的脚本 2.问题解答 在解答这个问题之前,有必要先介绍一下关于样例应用程序的运行方式和协议选择,关于样例程序的安装问题,前面已经讲过,在这里就不再赘述.样例程序安装好以后,可以通过查看[开始]&

Java面试宝典2013版(超长版)

一. Java基础部分......................................................................................................2 1.一个".java"源文件里能否够包含多个类(不是内部类)?有什么限制?.....2 2.Java有没有goto?........................................................................

MongoDB(三)——CRUD

MongoDB作为非关系型数据库.还是传统数据库的增删改查有很大的差别的.这里仅仅是将知识点进行了一下提纲挈领,实际用的时候.我们百度一下具体使用方法就可以. 先看大的几个方面: 一.对于里边的插入和删除不再过多赘述.相对来说知识点比較少. 先来看一下更新,经常使用操作还是很实用的,须要我们依据实际情况灵活运用,这里仅仅是提出了知识点,须要百度出样例来学习使用: 2,查询也是一样,看一下知识点的汇总.事实上用几个.还是有规律的.比較easy记录的: 3,看一下固定集合Capped Collect

面向对象重要设计原则概述

第一种讲法 凭什么要用面向对象来编程,不用是否可以?今天我们通过讲这么几个设计原则来说明为什么要用面向对象,它的好处在哪里. 开放-封闭原则:是说软件实体(类.模块.函数等等)应该可以扩展,但是不可修改. 里氏代换原则:子类型必须能够替换掉它们的父类型. 依赖倒转原则:A. 高层模块不应该依赖低层模块.两个都应该依赖抽象.B. 抽象不应该依赖细节.细节应该依赖抽象. 讲解完毕,今天培训结束. 反响:捣浆糊讲解,大家笑骂. 第二种讲法 开放-封闭原则举例 1982年1月,小平同志在会见美国华人协会

(测试文章,转载)CSS深入理解vertical-align和line-height的基友关系

一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦,突然想起来,我就是住在上海郊外的小乡镇上. 刚刚买了几十股京东的股票,第一次玩这个,看好京东的发展.其实股价21的时候就打算入手了,但是,转外汇的时候,提示,要工作时间.然后一忙二忘,等现在入的时候,已经涨了20%多了,科科,肥皂弄人啊!写到这里的时候,忍不住拿出手机一看,哎呦,不错哦,盈利28刀

css中的@inport 与link

在html 代码中我们常常用分离的思想引入外部的css文件,常用的方法有2种,@import 语法: <style type="text/css" media="screen"> @import url("text.css"); </style> link  语法: <style type="text/css" > <link href="text.css"/>

CSS十问——好奇心+刨根问底=CSSer【转】

CSS十问——好奇心+刨根问底=CSSer 最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会

深入理解vertical-align和line-height的关系

vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的,而是相对于line-height计算的.举个简单的例子,如下CSS代码: { line-height: 30px; vertical-align: -10%; } 实际上,等同于: { line-height: 30px; vertical-align: -3px; /* = 30px * -10% */ } CSS属性何其多,偏偏跟line-height有一腿,这不是有基情那是什么? ① 基本现象 要八卦verti

可以使你成为更优秀程序员的5个好习惯

我们都希望能够在我们所做的事情中得到成长,在WEB开发领域,我们花费时间最多的就是编写代码.这可能包括HTML, CSS, JavaScript, PHP, Python, ActionScript或者任何其他你构建WEB站点时选用的语言. 这篇文章中,我们将分享一些实际的步骤,使你可以扩充技能,成为一个更优秀的程序员.我们提出五个不同的生活习惯,它们可以使你在你所从事的领域变得更加优秀. 1. 一个时间段内只专注于一种类型的语言 如果你正在设计或开发网站,你将需要同时熟悉多种不同的语言.你可能