float和display:inline-block

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

原创最新推荐文章于 2021-08-06 09:06:14 发布 · 656 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#float #displayinline-block

html 专栏收录该内容

10 篇文章

订阅专栏

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;
			}