前端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的知识点和一些应用。


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

查看所有标签

猜你喜欢:

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

GUI设计禁忌2.0

GUI设计禁忌2.0

Jeff Johnson / 盛海艳 等 / 机械工业出版社 / 2008 / 49.00元

本书描述软件开发人员在设计图形用户界面(GUI)时经常犯的“禁忌”,并提出避免这些错误的基本原则和理论依据。本书将GUI禁忌分为7种类型:GUI控件禁忌、导航禁忌、文字禁忌、图形设计和布局禁忌、交互禁忌、响应性禁忌以及管理禁忌,并分别进行详述。 本书编排独特,条理清晰,针对性极强,是不可多得的GUI设计优秀资源。本书适合软件开发人员、web站点设计人员、开发经理、用户界面设计人员等阅读。一起来看看 《GUI设计禁忌2.0》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具