bfc+css

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;
}


 


 


 


				


				
时间： 2024-10-24 00:27:39 

		


		


	

	
	

		


		
bfc+css的相关文章


						

		

			

                是的，是你的BFC - CSS中常用
			

		

		

									

				是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染显示规则 一.简易理解.定义 可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,同时外面的元素也不会影响我们容器内的子元素. 二.BFC布局规则 内部的盒子会在垂直方向,一个个地放置: 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠 : 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此			

		

	

						

		

			

                我对CSS中的BFC的理解
			

		

		

									

				 1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下文)的缩写,它是W3C CSS 2.1 规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.什么情况下会创建BFC CSS规范说明了在下列这些情况下会创建新的block formatti			

		

	

				

		

			

                BFC相关知识
			

		

		

									

				一.什么是BFC css布局主要采用盒子模型(BOX),元素的类型和 display 属性,决定了 Box 的类型,常见的盒子类型有两种: block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box. inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box. 不同类型的BOX如何渲染是			

		

	

				

		

			

                各种前端资源汇总「备忘、常逛」【持续更新...】
			

		

		

									

				webpack: [webpack-howto] [webpack] [http://www.infoq.com/cn/articles/react-and-webpack] JS相关: [javascript weekly] [javascript标准参考教程] --阮一峰的参考教程,可读性很好,非常不错的 [QuirksMode-DOM] [深入理解JAVASCRIPT系列] [User Timing API (window performence)] 关注ES6(ES2015): [ES6			

		

	

				

		

			

                前端资源
			

		

		

									

				Webpack: [webpack-howto] [webpack] [http://www.infoq.com/cn/articles/react-and-webpack] JS相关: [javascript weekly] [javascript标准参考教程] --阮一峰的参考教程,可读性很好,非常不错的 [QuirksMode-DOM] [深入理解JAVASCRIPT系列] [User Timing API (window performence)] 关注ES6(ES2015): [ES6			

		

	

				

		

			

                CSS学习笔记09 简单理解BFC
			

		

		

									

				1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}			

		

	

				

		

			

                CSS 定位规则之 BFC
			

		

		

									

				1. BFC(block formatting context,中文常译为块级格式化上下文)是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在进行盒子元素布局的时候, BFC 提供了一个环境, 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局.比如浮动元素会形成 BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的.也就是说,如果一个元素符合了成为 BFC 的条件,该元素内部元素的布局和定位就和外			

		

	

				

		

			

                CSS布局中一个简单的应用BFC的例子
			

		

		

									

				什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠.而float和clear float也只对同一个BFC内的元素有效. 什么情况产生BFC W3C标准中这样描述:Floats, absolutely positioned elements, block containers (such as			

		

	

				

		

			

                css规范 BFC
			

		

		

									

				1.BFC的概念 BFC全称Block Formatting Context ,中文直译为块级格式上下文.它是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.通俗的来说:BFC是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子内部的元素无论如何翻江倒海,都不会影响到外部.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)