BFC块级格式化上下文--小技巧

特性：

（1）形成BFC的元素，会在垂直方向叠加margin  （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin）

（2）形成BFC的元素，不会与浮动元素重叠

（3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局

（4）形成BFC的元素的高度会将浮动元素计算在内。

形成BFC的条件

（1）根标签

（2）float为left|right;

（3）position为absolute|fixed

（4）overflow为hidden|scroll|auto;

（5）dispaly为inline-block

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BFC外边距重叠</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
				margin-bottom: 30px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				margin-top: 70px;
			}
			.parent{
				/* 触发bfc */
				/* display: inline-block; */
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="box1"></div>
		</div>
		<div class="box2"></div>
	</body>
</html>

案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动不会和BFC外边距重叠</title>
		<style type="text/css">
			.box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				margin-bottom: 30px;
				
				float: left;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				margin-top: 70px;
				/* 两种方式触发bfc */
				/* float: left; */
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

 

案例3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动子元素参与高度计算</title>
		<style type="text/css">
			.parent{
				/* 3种触发bfc渲染模式 */
				overflow: hidden;
				/* float: left; */
				/* display: inline-block; */
			}
			.box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				margin-bottom: 30px;

				float: left;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background-color: yellow;
				margin-top: 70px;

				float: left;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
	</body>
</html>

 

 

posted @ 2022-05-16 20:06  JackieDYH  阅读(3)  评论(0)  编辑  收藏  举报  来源