前端css布局之BFC

栏目: CSS · 发布时间: 5年前

内容简介:哈喽,各位小伙伴好!今天来整理下前端关于css布局的一个知识点 - BFC(Block fomatting context),如果知识点梳理有出错的地方,望伙伴们帮忙指出,一起进步~BFC 可以理解为建立一个布局容器,容器里按自己的方式来布局,且与容器外界的元素互不影响。如图所示,这样我们就通过float 来使得 .fl 元素生成一个 BFC 容器,也可以看到:

哈喽,各位小伙伴好!今天来整理下前端关于css布局的一个知识点 - BFC(Block fomatting context),如果知识点梳理有出错的地方,望伙伴们帮忙指出,一起进步~

一、什么是 BFC

BFC 可以理解为建立一个布局容器,容器里按自己的方式来布局,且与容器外界的元素互不影响。

二、BFC 特性

  • 1.BFC里的布局跟常规流里的一样,例如盒子会在垂直方向排列。
  • 2.属于同一个BFC里的盒子会产生margin重叠。
  • 3.容器内元素的margin的左边,会与容器的border左边相接触。
  • 4.BFC容器不会与float元素发生重叠。
  • 5.BFC内的元素不会影响到外部的元素。
  • 6.BFC容器计算高度时,内部float元素也参与。

三、怎么产生 BFC

  • 根元素
  • float不为none的浮动元素。
  • 绝对定位元素。(position: fixed; 或 position:absolute;)
  • overflow值不为visible的元素。
  • display:flex; 、 display:inlie-block; 、 display: table-cell; 等。

四、实例

  • 1.产生一个 BFC 容器。
<!-- 1.产生一个 BFC 容器 -->
	<style>
		.wrap {
			background-color: #ccc;
		}
		.fl	{
			float: left;
			background-color: yellow;
		}
		.fl>div {
			border:1px solid #333;
		}
	</style>
	<div class="wrap">
		<div class="fl">
			<div class="div">这是div - 1</div>
			<div class="div">这是div - 2</div>
		</div>
		产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器产生一个 BFC 容器
	</div>
复制代码
前端css布局之BFC

如图所示,这样我们就通过float 来使得 .fl 元素生成一个 BFC 容器,也可以看到:

1.容器里的div元素也是垂直排列。(对应上面介绍的特性1 - BFC里的布局跟常规流里的一样,例如盒子会在垂直方向排列)。

2.容器里的 div 元素只会撑满整个BFC容器,并不会对容器外产生影响。(对应上面介绍的特性5 - BFC内的元素不会影响到外部的元素。)

  • 2.产生margin重叠
<!-- 产生 margin 重叠 -->
	<style>
		.p1 {
			margin:10px 0;
			background-color: #ccc;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1">这是文本1111111111111111</div>
	<div class="p2">这是文本2222222222222222</div>
复制代码
前端css布局之BFC

从图中可以看到 .p2 的margin-top和 .p1 的margin-bottom 重叠在一起了,使得他们中间的间距只有10px而不是20px。(对应上面介绍的特性2 - 属于同一个BFC里的盒子会产生margin重叠)。 因为跟元素本身也是一个BFC。 解决方法是,创建一个BFC容器:(一个元素只能受一个BFC容器影响,当元素自己也成为BFC时,就不收根元素影响了)

<!-- 解决产生 margin 重叠 -->
	<style>
		.p1 {
			margin:10px 0;
			background-color: #ccc;
		}
		.wrap {
			overflow:hidden;
		}
		.p2 {
			margin:10px 0;
			background-color: #eee;
		}
	</style>
	<div class="p1">这是文本1111111111111111</div>
	<div class="wrap">
		<div class="p2">这是文本2222222222222222</div>
	</div>
复制代码
前端css布局之BFC
  • 3.利用BFC进行左右布局
<!-- 利用 BFC进行左右布局 -->
	<style>
		.wrap {

		}
		.fl {
			float: left;
			width: 120px;
			background-color: #eee;
			height: 300px;
		}
		.main {
			background-color: #ccc;
			height: 400px;
			overflow:hidden;
		}

	</style>
	<div class="wrap">
		<div class="fl">左边</div>
		<div class="main">主体内容主体内容主体内容主体内容主体内容主体内容</div>
	</div>
复制代码

(对应上面介绍的特性4 - BFC容器不会与float元素发生重叠)

前端css布局之BFC
  • 解决浮动元素造成父元素高度出错
前端css布局之BFC

当有子元素浮动时,父元素在计算高度时没有把浮动元素的高度算进去,所以看到了 .fl 元素超出了父元素。将父元素设成BFC可解决这个问题(对应上面介绍的特性6 - BFC容器计算高度时,内部float元素也参与)

<!-- 解决浮动元素造成的父元素高度出错 -->
	<style>
		.wrap {
			background-color: #eee;
			overflow:hidden;
		}
		.fl	{
			float: left;
			background-color: #ccc;
			height: 100px;
		}
		.con {
			height: 30px;
		}
	</style>
	<div class="wrap">
		<div class="fl">高度为100px的浮动元素</div>
		<div class="con">这是文本这是文本这是文本这是文本这是文本</div>
	</div>
复制代码
前端css布局之BFC

以上就是我整理的一些关于BFC的知识点和一些应用。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ASP.NET 2.0技术内幕

ASP.NET 2.0技术内幕

埃斯帕斯托 / 施平安 / 清华大学出版社 / 2006-8 / 68.00元

《ASP.NET2.0技术内幕》围绕着ASP.NET 2.0是Web开发的重要分水岭这一主题,采用自顶向下的方式介绍ASP.NET 2.0的最新编程实践,从更广泛的特征到具体的实现和编程细节,充分展示了ASP.NET的最新编程实践。全书共15章,主题涉及HTTP运行库、安全性、缓存、状态管理、控件、数据绑定和数据访问。   《ASP.NET2.0技术内幕》主题丰富,讲解透彻,包含大量实例,是......一起来看看 《ASP.NET 2.0技术内幕》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码