阅读 150

前端css布局之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>
复制代码

产生一个容器
如图所示,这样我们就通过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>
复制代码

产生 margin 重叠
从图中可以看到 .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>
复制代码

解决margin重叠

  • 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左右布局

  • 解决浮动元素造成父元素高度出错

浮动造成高度出错
当有子元素浮动时,父元素在计算高度时没有把浮动元素的高度算进去,所以看到了 .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>
复制代码

清除浮动造成的高度出错

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

关注下面的标签,发现更多相似文章
评论