您的位置: 首页  >  文章  >  CSS之BFC详解

CSS之BFC详解

分类: 文章 • 2023-11-01 16:46:40

在了解BFC前，首先需要知道它是什么，它有哪些特性，它是如何形成的。

一、什么是BFC

BFC（Block Formatting Context）块级格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、BFC的特性

  1. 内部的box会在垂直方向，一个接一个的放置；
  2. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠；
  3. bfc的区域不会与浮动区域的box重叠；
  4. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，里面的也不会影响外面的；
  5. 计算bfc高度的时候，浮动元素也会参与计算。

三、如何形成BFC

  1. 渲染float属性不为none（脱离文档流）；
  2. position为absolute或fixed（脱离文档流）；
  3. display为inline-block,table-cell,table-caption,flex,inine-flex；
  4. overflow不为visible（为 hidden、auto、scroll时）。

四、应用场景

  1. 防止垂直margin重叠；
  2. 自适应两栏、三栏布局；
  3. 清除内部浮动 。

五、案例

1、防止垂直边距重叠

垂直边距重叠示例：常规两个盒模型上下边距会重叠，取两者边距最大值，如下图所示：
CSS之BFC详解

防止上下box垂直边距重叠：这里用float产生BFC，当然还有其它方式也可以产生同样效果，这里就不一一举例了。
CSS之BFC详解

2、两栏布局

CSS之BFC详解

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.left{
			float:left;
			width:200px;
			background-color:red;
			min-height:100%;
			height:300px;
		}
		.right{
			overflow:hidden;
			background-color:green;
			height:300px;
		}
	</style>
</head>
<body>
	<h1>左右布局，左侧固定宽度200px,右侧宽度自适应</h1>
	<div class="left"></div>
	<div class="right"></div>
</body>
</html>

3、清除浮动

清除浮动案例1：

图文环绕：img标签采用float:left浮动在左侧，覆盖在p标签上方。
CSS之BFC详解

用BFC防止文字环绕图片：为文字标签添加overflow:hidden，产生BFC效果
CSS之BFC详解

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img{
			float:left;
			width:100px;
			height:100px;
			border:solid 1px #666;
		}
	</style>
</head>
<body>
	
	<div class="img-txt">
		<img src="https://img02.sogoucdn.com/app/a/100520021/B78C3A9378E757CBB073D97E8B4E7062"> 
		<p style="overflow:hidden">好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~ 好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~好好学习，天天向上！说的很有道理，正所谓不学无术嘛~~</p>
	</div>
</body>
</html>

清除浮动案例2：

浮动元素不能撑起处于标准文档流中父层容器的高度，添加overflow:hidden 可清除浮动

实例：
一个父容器有两个浮动的子容器，该父容器的高度没有被子容器撑起，高度为0，宽度为行宽，如下图所示

CSS之BFC详解

为父容器添加overflow:hidden，清除浮动后，它的高度为子容器撑起的高度，宽度为行宽，如下图所示
CSS之BFC详解

为父容器添加float:left使它浮动，它的宽高为子容器撑起的宽高，如下图所示：
CSS之BFC详解

相关推荐