flex和float的布局的区别

最新推荐文章于 2025-03-21 00:44:44 发布

北冥有锅

最新推荐文章于 2025-03-21 00:44:44 发布

阅读量5.8k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_43371287/article/details/94463716

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了Flex布局和Float布局在网页设计中的应用。通过实际案例，详细解析了两种布局方式的特点及解决常见问题的方法，如清除浮动和确定元素高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<template>
	<div class="income-container">
		<div class="income-list" v-for="item in dataList">
			<div class="income-title">{{item.title}}</div>
			<div class="income-time">{{item.time}}</div>
			<div class="price-status">
				<div class="income-price">￥{{item.price}}</div>
				<div class="income-status">{{item.status}}</div>
			</div>
			<div class="income-box">
				<div class="ex-box">
					<div class="ex-title">? 奖励说明</div>
					<div class="ex-content">{{item.explanation}}{{item.price}}</div>
				</div>
				<div class="ex-box">
					<div class="ex-title">? 关联订单</div>
					{{item.related}}
				</div>
			</div>
		</div>
	</div>
</template>
<style rel="stylesheet/scss" lang="scss" scoped>
		.income-container{ 
			width: 100%;
 			flex: 1 1 auto;
 			overflow: auto;
		}
		.income-list{
			width: 100%;
			height: 265px;
			padding: 0 30px;
			margin-top: 25px;
			position: relative;
			background-color:#fff;
			display: flex;//flex布局
			flex-direction: column;//z纵向排列
			flex-shrink: 0;
			color: #999999;
			.income-title{
				color: #515a6e;
				padding-top: 30px;
				line-height: 30px;
				font-size: 30px;
			}
			.income-time{
				padding-top: 20px;
				height: 10px;
				font-size: 24px;
			}
			.price-status{
				right: 30px;
				top: 45px;
				width: 250px;
				position: absolute;
				display: flex;//flex布局
				flex-direction: row;//z纵向排列
				justify-content:space-between;//左中右，左右排列
				font-size: 30px;
				.income-price{
					color: #ff3e3e;
				}
			}
			.income-box{
				height: 120px;
				padding: 0 30px;
				width: 700px;
				position: absolute;
				bottom: 20px;
				font-size: 24px;
				display: flex;
				flex-direction: column;
				background-color: #f5f5f5;
				.ex-box{
					height: 345px;
					justify-content:space-between;
					display: flex;
					flex-direction: row;
					align-items: center;
					.ex-title{
						flex: 0 0 auto;
					}
					.ex-content{
						flex: 1 1 auto;
					    white-space: nowrap;
					    overflow: hidden;
					    text-overflow: ellipsis;
					    margin-left: 30px;
					    text-align: right;
					}
				}
			}
		}
</style>

使用flex布局和float布局排列绿色边框的内容。

1- - - -float布局的思想，如下所示。一分为二。红色边框一个div，绿色边框一歌div。红色div子元素，左右浮动，分别设置：float:left；以及float：right。绿色div

3- - - -不给红色和绿色div设置高度。直接根据line-height的值确定高度。

2- - - -由于红色div中子元素的浮动（float），且红色div没有高度的情况下，绿色div会抢位置（除非给绿色div设置绝对定位，但是这样有缺点）。解决方法：给红色div设置：overflow：hidden；（清除浮动）。

在这里插入图片描述

<template>
	<div class="income-container">
		<div class="income-list" v-for="item in dataList">
			<div class="red">//精髓！！！！！！！！
				<div class="title-time">
					<div class="income-title">{{item.title}}</div>
					<div class="income-time">{{item.time}}</div>
				</div>
				<div class="price-status">
					<div class="income-price">￥{{item.price}}</div>
					<div class="income-status">{{item.status}}</div>
				</div>
			</div>
			<div class="income-box">
				<div class="ex-box">
					<div class="ex-title">• 奖励说明</div>
					<div class="ex-content">{{item.explanation}}{{item.price}}</div>
				</div>
				<div class="ex-box">
					<div class="ex-title">• 关联订单</div>
					<div class="ex-content">{{item.related}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
		.income-container{
			width: 100%;
 			flex: 1 1 auto;
			overflow: auto;
		}
		.red{
			overflow:hidden;
		}
		.income-list{
			width: 100%;
			height: 265px;
			padding: 0 30px;
			margin-top: 25px;
			position: relative;
			background-color:#fff;
			flex-shrink: 0;
			color: #999999;
			.title-time{
				float: left;
			}
			.income-title{
				color: #515a6e;
				padding-top: 30px;
				font-size: 30px;
			}
			.income-time{
				padding-top: 20px;
				font-size: 24px;
			}
			.price-status{
				width: 250px;
				float: right;
				line-height: 120px;
				font-size: 30px;
				.income-price{
					float:left;
					color: #ff3e3e;
				}
				.income-status{
					text-align: right;
				}
			}
			.income-box{
				padding: 0 30px;
				width: 700px;
				font-size: 24px;
				background-color: #f5f5f5;
				.ex-box{
					line-height:60px;
					.ex-title{
						float: left;
					}
					.ex-content{
					    white-space: nowrap;
					    overflow: hidden;
					    text-overflow: ellipsis;
						padding-left:30px;
					    text-align: right;
					}
				}
			}
		}
	}
</style>