CSS之BFC详解

最新推荐文章于 2024-08-25 15:21:31 发布

涵一

最新推荐文章于 2024-08-25 15:21:31 发布

阅读量630

点赞数

分类专栏： css 文章标签： CSS之BFC详解

本文链接：https://blog.youkuaiyun.com/yihanzhi/article/details/83385091

版权

css 专栏收录该内容

14 篇文章

订阅专栏

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

一、什么是BFC

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

二、BFC的特性

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

三、如何形成BFC

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

四、应用场景

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

五、案例

1、防止垂直边距重叠

垂直边距重叠示例：常规两个盒模型上下边距会重叠，取两者边距最大值，如下图所示：
在这里插入图片描述

防止上下box垂直边距重叠：这里用float产生BFC，当然还有其它方式也可以产生同样效果，这里就不一一举例了。
在这里插入图片描述

2、两栏布局

在这里插入图片描述

代码如下：

<!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标签上方。
在这里插入图片描述

用BFC防止文字环绕图片：为文字标签添加overflow:hidden，产生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>