float和display:inline-block

最新推荐文章于 2021-08-06 09:06:14 发布

q_A_p

最新推荐文章于 2021-08-06 09:06:14 发布

阅读量551

点赞数

分类专栏： html 文章标签： float displayinline-block

本文链接：https://blog.csdn.net/q_A_p/article/details/53256699

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

float和display:inline-block 都能使两个块形元素并排

下面是div部分代码

       <body>
		<div class="all">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="bott"></div>
	</body>

使用float时结果是

			*{
				padding: 0;
				margin: 0;
			}
			.left{
				width: 50%;
				height: 100px;
				float: left;
				background: red;
			}
			.right{
				width: 50%;
				height: 100px;
				float: left;
				background: blueviolet;
				
			}

使用float后相当于界面分成了上下两层，使用float浮动于上一层，会覆盖下一层的颜色

			.left{
				width: 50%;
				height: 100px;
				background: red;
				float: left;
			}
			.right{
				width: 50%;
				height: 150px;
				background: blueviolet;
				float: left;
				
			}
			.bott{
				height: 200px;
				background: orange;
			}

并且改变行高时，不会撑起一行，把right和left加上透明度后，可以清楚的看到位于下层的all和bott部分，以及浮动与上层的letf

.left{
				width: 50%;
				height: 100px;
				background: red;
				float: left;
				opacity: 0.5;
				
			}
			.right{
				width: 50%;
				height: 150px;
				background: blueviolet;
				float: left;
				opacity: 0.5;
			}
			.bott{
				height: 200px;
				background: orange;
			}
			.all{
				height: 125px;
				background: greenyellow;
			}

如果直接把float换成display:inline-block 并不能形成并排效果

如果改变宽度值，才能形成并排效果，因为使用块与块之间会有间隙

			*{
				padding: 0;
				margin: 0;
			}
			.left{
				width: 50%;
				height: 100px;
				display:inline-block;
				background: red;
			}
			.right{
				width: 49%;//宽度改变
				height: 100px;
				background: blueviolet;
				display: inline-block;
				
			}

如果改变行高时，display:inline-block 会撑开一行

			.left{
				width: 50%;
				height: 100px;
				background: red;
				display: inline-block;
				
			}
			.right{
				width: 49%;
				height: 150px;
				background: blueviolet;
				display: inline-block;
			}
			.bott{
				height: 100px;
				background: orange;
			}

如果把all加上背景色而不设置宽度，display能撑开div块，而float不能

.left{
				width: 50%;
				height: 100px;
				background: red;
				display: inline-block;
				
			}
			.right{
				width: 49%;
				height: 150px;
				background: blueviolet;
				display: inline-block;
			}
			.bott{
				height: 100px;
				background: orange;
			}
			.all{
				background: greenyellow;
			}

q_A_p

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
float和display:inline-block

float和display:inline-block 都能使两个块形元素并排下面是div部分代码使用float时结果是 *{ padding: 0; margin: 0; } .left{ width: 50%; height: 100px; float: left;
复制链接

扫一扫