CSS BFC的定义

是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse)。

当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。

怎样才能形成BFC

float的值不为none。

overflow的值不为visible。

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

position的值不为relative和static。

代码:

<!DOCTYPE html>
<html>
<head>
<meta content="text/html"charset="utf-8"/>
<title></title>
<style type="text/css">
.container{
margin: 30px auto;
width:600px;
height: 300px;
}
.p{
border:solid 3px #a33;
}
.c{
width: 100px;
height: 100px;
background-color: #060;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
</body>
</html>

1.css清除浮动

我们想看到的效果是这样:

但是实际效果是这样的:

清理浮动一般有两种思路

1.利用 clear属性,清除浮动

2.使父容器形成BFC

1.1我们可以利用这点儿在父容器的最后添加一个空的div,设置属性clear:left,这样就可以达到我们目的了。

对代码稍作改动:

<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:left;"></div>
</div>
1.2使用CSS插入元素

上面的做法浏览器兼容性不错,但是有个很大的问题就是向页面添加了内容来达到改变效果的目的,也就是数据和表现混淆,既然是变现,看看怎么使用CSS来解决这一问题。根本的做法还是向父容器最后追加元素,但我们可以利用CSS的:after伪元素来做此事。

添加一个类 floatfix:

.floatfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
对父容器添加此类:
<div class="p floatfix">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
</div>
对父容器添加floatfix类后,会为其追加一个不可见的块元素,然后设置其clear属性为left,和刚才原理类似。
1.3还有一种方法;
.floatfix:after{
content:"";
display:table;
clear:both;
}
但是IE6、7不支持伪元素怎们办?这就需要我们使用BFC/haslayout的姿势了
 2.1使父容器形成BFC
BFC有三个特性:

1.BFC会阻止垂直外边距(margin-top、margin-bottom)折叠

按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。

因此要解决margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

2.BFC不会重叠浮动元素

3.BFC可以包含浮动

我们可以利用这些特性,只要父容器形成BFC就可以,简单看看如何形成BFC:

float为 left|right

overflow为 hidden|auto|scroll

display为 table-cell|table-caption|inline-block

position为 absolute|fixed

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

2.1.1利用float来使父容器形成BFC

<div class="p" style="float:left;">
<div class="c">1</div>
<div class="c">2</div>
<div class="c">3</div>
</div>
我们可以看到父容器高度没有塌陷,但是长度变短了,因为div应用float‘后会根据内容来改变长度,这个在很多时候很有用,但是我们不希望有这种效果怎么办?

2.2.2 使用BFC的其它局限


上面提到使用BFC使用float的时候会使父容器长度缩短,而且还有个重要缺陷——父容器float解决了其塌陷问题,那么父容器的父容器怎么办?难道要全部使用folat吗(确实有这种布局方式倒是)。BFC的几种方式都有各自的问题,overflow属性会影响滚动条和绝对定位的元素;position会改变元素的定位方式,这是我们不希望的,display这几种方式依然没有解决低版本IE问题。。。

看起来还是第一种方式比较好,可是低版本IE该怎么办呢?

2.2.3 hasLayout

我们知道在IE6、7内有个hasLayout的概念,很多bug正式由hasLayout导致的,当元素的hasLayout属性值为false的时候,元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果,元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动,先看看怎么使元素hasLayout为true

  • position: absolute
  • float: left|right,由于 layout 元素的特性,浮动模型会有很多怪异的表现。
  • display: inline-block
  • width: 除 “auto” 外的任意值
  • height: 除 “auto” 外的任意值
  • zoom: 除 “normal” 外的任意值
  • writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true

IE7中引入的hasLayout成员

    • overflow: hidden|scroll|auto
      在 IE7 中,overflow 也变成了一个 layout 触发器,这个属性在之前版本 IE 中没有触发 layout 的功能。
    • position: fixed
    • min-width: 任意值
      就算设为0也可以让该元素获得 layout。
    • max-width: 除 “none” 之外的任意值
    • min-height: 任意值
      即使设为0也可以让该元素的 haslayout=true
    • max-height: 除 “none” 之外的任意值

经过上面的比较我们可以得出一个相对靠谱的解决方案

  • 在IE+、现代浏览器上使用伪元素
  • 在IE6、7使用hasLayout

具体应该使用哪种方式来使元素hasLayout为true呢?相对而言zoom:1比较好,因为不会造成其它影响。想造成只在IE6、7上使用某些CSS的效果,我们还得需要一些CSS hack的知识,我们可以写出这样的CSS

.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
 
 
 

bfc+css的更多相关文章

  1. 是的,是你的BFC - CSS中常用

    是的,是你的BFC - CSS中常用     是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染 ...

  2. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  3. BFC相关知识

    一.什么是BFC css布局主要采用盒子模型(BOX),元素的类型和 display 属性,决定了 Box 的类型,常见的盒子类型有两种: block-level box:display 属性为 bl ...

  4. 前端校招知识体系之css

    本文将从以下四个方面展开介绍: 选择器 样式表继承 css3部分特性 BFC css选择器优先级策略 先附上个链接:css选择器参考手册 内联>id>class=属性选择器=伪类选择器&g ...

  5. CSS3 & 页面布局

    相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...

  6. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  8. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  9. CSS清浮动处理(Clear与BFC)

    在CSS布局中float属性经常会被用到,但使用float属性后会使其在普通流中脱离父容器,让人很苦恼 1 浮动带来布局的便利,却也带来了新问题 <!doctype html> <h ...

随机推荐

  1. String类的常用判断方法使用练习

    选取了一些常用的判断方法进行了使用练习,后续跟新其他方法 package StringDemo; // String类的判断方法解析 // 1:boolean equals(); // 判断字符串是否 ...

  2. python 循环嵌套

    需求如下: 1. #定义商品列表类 # def shangpin_list(): # for i in com_list: # print(com_list.index(i),end=" & ...

  3. MM常用表

    Table 表描述 MKPF 物料凭证抬头 MSEG 物料凭证段

  4. 10个使用Java最广泛的现实领域

    10个使用Java最广泛的现实领域 如果你是一个初学者,刚刚开始学习Java,你可能会想Java有什么用呢?除了Minecraft貌似也看不到其他用Java写的游戏,像Adobe Acrobat和Mi ...

  5. JS之模块模式应用

    之前做过一些简单的单页面应用项目,是对模块模式很好的应用,我决定动手做一个简单的Demo出来. 基本思想是设计一个加载器,当用户点击菜单时,获取不同选项的按钮id,根据不同id实现对页面内容的替换. ...

  6. js 两数相减

    var SecondPrice = document.getElementById("txtSecondPrice");  //秒杀价            var MarketP ...

  7. 解決 java.security.cert.CertificateException: Certificates does not conform to algorithm constraints

    找到 jre/lib/security/java.security 将 jdk.certpath.disabledAlgorithms=MD2, DSA, RSA keySize < 2048 ...

  8. js代码学习

    运算符: 复杂运算符:Math.pow(2,53)   //=>9007192145641435:2的53次幂 Math.round(.6)  //=>1.0:四舍五入 Math.ceil ...

  9. iOS.ReactNative-5-make-react-native-to-support-dynamically-update

    基于React Native来实现App的热更新 热更新: 类似Hot-Patching,在程序不发布版本的前提下,对部分功能或者全部功能进行修改或者升级. JSX 1. JSX简介 1.1 http ...

  10. C#发送邮件

    以下代码已用 .yeah .qq 以及本人公司邮箱测试通过,可多发,可挂附件 本次测试邮件发送类,是用的winform 页面如下 窗口的后台代码如下: using System; using Syst ...