BFC

最新推荐文章于 2021-01-19 22:43:27 发布

茂树24

最新推荐文章于 2021-01-19 22:43:27 发布

阅读量531

点赞数 1

分类专栏： CSS2.1 文章标签： BFC BFC 高度声明BFC

本文链接：https://blog.csdn.net/wmaoshu/article/details/53611966

版权

CSS2.1 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、BFC是什么？

BFC是定义了在正常流中块元素的布局方式。怎么理解，看下面叙述。

当一个元素的position声明为static或者是默认状态下，这个元素就会被布局在正常流中。我们知道在根元素也就是html或者body元素中嵌套一个块元素的话，这个块元素就会尽可能的向左和向上的位置进行布局。那么为什么会这样？这是因为这个根元素为这个块元素生成了一个BFC的环境，这个环境决定了这个块元素的布局方式要按照BFC定义的方式进行布局，也就是尽可能的向上向左。

更直白的说，我只要将一个元素的内部也就是其子元素放置的环境声明为BFC环境，那么在这个元素内部所有的子元素就会按照BFC规定的方式进行布局。那么如何声明这么一个BFC环境呢？

二、如何声明BFC环境

如果一个元素满足如下性质，那么就会为其子元素定义了一个BFC环境。

1.浮动

2.绝对定位

3.非块盒的块容器（一般是 inline-block 、table-cell、table-caption）注意没有div或者广义的说没有display为block的元素，因为div是一个块盒。

4.‘overflow’不为visible的快盒。

那么，问题来了，一个元素声明了overflow:hidden和display:inline-block能不能产生BFC？

答案可能是yes，原因是满足了非块盒的块容器，虽然不满足‘overflow’不为visible的快盒。

三、在BFC环境下的元素如何布局？

在一个BFC环境下，竖直方向上，盒子一个接一个的从包含快的最顶端放置，也就是说尽可能的靠上放置。水平方向上，每个盒子尽可能的向左放置。即使存在浮动元素也不例外。并且由于BFC环境流失正常流环境，所以说垂直相邻的块元素的margin能够合并。

四、声明BFC元素的高度问题。

1如果它只含有内联级子级，高度就是最高的行盒的top与最低的行盒的bottom之间的距离

2如果它只含有块级子级，高度由就是最高的块级子级盒的top margin-edge到最低的块级子级盒的bottom margin-edge之间的距离

3绝对定位的子级会被忽略，而相对定位的盒不考虑其偏移。

4对于浮动元素，那么声明BFC的元素也就是“父元素”的高度要包含浮动元素的margin框。前提是这个浮动元素是该父元素的直接子元素。

五、应用

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	h1 {text-align:center;}
	.catalogue {
		width:1000px;
		margin:0 auto;
	}
	.bfc {
		margin:30px 0;
		overflow: hidden;  /*清浮动*/ 
		zoom:1;
		height:20px;
		
	}
	.bfc > div {
		margin:0 20px;
	}
	.bfc .name {
		float: left;
	}
	.bfc .page {
		float: right;
	}
	.bfc .line {
		height:100%;
		background:#fff url(style/point.png) center repeat-x;
		overflow: hidden;  /*BFC在浮动周围环绕 但是浮动元素不会覆盖BFC*/
	}

</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>BFC应用之目录线</title>
</head>
<body>
  <h1>日常应用目录、栏目标题等</h1>
  <div class="catalogue">
    <div class="bfc">
      <div class="name">CSS3的REM设置字体大小</div>
      <div class="page">w3cplus</div>
      <div class="line"></div>
    </div>
    <div class="bfc">
      <div class="name">FONT SIZING WITH REM </div>
      <div class="page">Jonathan Snook</div>
      <div class="line"></div>
    </div> 
    <div class="bfc">
      <div class="name">There’s more to the CSS rem unit than font sizing </div>
      <div class="page">css-tricks</div>
      <div class="line"></div>
    </div>
</div>
</body>
</html>

具体在该例子中对于浮动和BFC关系请到 http://blog.csdn.net/wmaoshu/article/details/52995912

茂树24

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC

一、BFC是什么？BFC是定义了在正常流中块元素的布局方式。怎么理解，看下面叙述。当一个元素的position声明为static或者是默认状态下，这个元素就会被布局在正常流中。我们知道在根元素也就是html或者body元素中嵌套一个块元素的话，这个块元素就会尽可能的向左和向上的位置进行布局。那么为什么会这样？这是因为这个根元素为这个块元素生成了一个BFC的环境，这个环境决定了这个块元素的布
复制链接

扫一扫

专栏目录