HTML常用布局方式float与display：inlin-block各自的弊端与解决方案

最新推荐文章于 2023-01-31 20:14:15 发布

潇雪凌宇

最新推荐文章于 2023-01-31 20:14:15 发布

阅读量1.8k

点赞数 3

分类专栏： HTML5 文章标签： HTML5 布局 float display 初学者

本文链接：https://blog.csdn.net/weixin_44407699/article/details/96043857

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在HTMl页面布局中，float和display：inline-block是我们常用的布局属性，通过这两个属性，可以将块元素（block类型）并排放置，但是这两种方式都有他们的弊端，今天我们来一起学习一下。

#作者一如既往的尽量用白话解释，让更多人能够看懂，如果有错误，欢迎批评指正，谢谢！#

float

使用float属性可以让多个块元素无缝贴合，同时可以控制它们是贴在左边还是右边

问题：无法撑起父<div>的高度与宽度

<html>
<head>
	<meta http-equiv="Content/Type" content="text/html; charset=utf-8"/>
</head>
<body>
	<div style="background-color: red" id="father">
		<div style="float: left;" id="son1">我是大儿子</div>
		<div style="float: left;" id="son2">我是二儿子</div>
	</div>
</body>
</html>

我们将父<div>的背景颜色设为红色，我们可以看到两个子<div>元素完全没有将父<div>的高度与宽度撑起，父<div>的背景属性完全没有显示出来。

解决方案：

方案一

为父<div>设置height

以下代码简写，仅把修改的部分写了出来，其他部分与上文代码保持不变


	<div style="background-color: red; height: 100px;" id="father">

我们可以看到，父<div>的属性得到实现，但是它的高度只能为我们设置的值，如果页面放大或缩小它都不能变化，因此不推荐使用。

方案二

给父集加overflow：hidden

原理：overflow：hidden是将正常溢出裁剪

然而float形式不是正常溢出，因此系统认为不适宜裁剪，则将父集大小调整为含有float的子集大小

以下代码简写，仅把修改的部分写了出来，其他部分与上文代码保持不变

<div style="background-color: red; overflow: hidden;" id="father">

这种方法能够使父<div>的高度随子<div>的变化而灵活变化，推荐使用

方案三

添加其他类型不同于父元素的块级元素

设置属性clear：both

作者用<p>元素来举例

<div style="background-color: red; overflow: hidden;" id="father">
	<div style="float: left;" id="son1">我是大儿子</div>
	<div style="float: left;" id="son2">我是二儿子</div>
	<p style="clear: both;"></p>
</div>

效果与方案二基本类似，但是由于添加了一个块，在后期编写JS的时候可能会造成影响，建议酌情使用

display

通过display:inline-block将块级元素转化为行内区块元素，使它们能够放进同一行

问题：有时会造成块之间的缝隙

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content/Type" content="text/html; charset=utf-8"/>
</head>
<body>
	<div style="background-color: red;" id="father">
		<div style="background-color: blue; display: inline-block;" id="son1">我是大儿子</div>
		<div style="background-color: yellow;display: inline-block;" id="son2">我是二儿子</div>
	</div>
</body>
</html>

可见，两个儿子<div>元素中间产生了空隙

解决方案

首先，我们要明白间隙是怎么产生的。

HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 产生了元素间的空隙。

方法一：

取消标签之间的换行与空格，即将多行代码写在同一行并且不设置空格符

以下代码简写，仅把修改的部分写了出来，其他部分与上文代码保持不变

<div style="background-color: red;" id="father">
	<div style="background-color: blue; display: inline-block;" id="son1">我是大儿子</div><div style="background-color: yellow;display: inline-block;" id="son2">我是二儿子</div>
</div>

实现了我们想要的效果，但是它存在很大的弊端，代码格式不美观、不规范，不利于维护

弊端：不好维护，不推荐使用

方法二：

由于空白产生原因是出现空白符，且大小不为0，因此我们将字体大小font-size设为0

以下代码简写，仅把修改的部分写了出来，其他部分与上文代码保持不变

	<div style="background-color: red; font-size: 0px;" id="father">
		<div style="background-color: blue; display: inline-block;" id="son1">我是大儿子</div>
		<div style="background-color: yellow;display: inline-block;" id="son2">我是二儿子</div>
	</div>

出现了白屏，是我们这个方法有问题吗？其实不是，因为我们将字体大小设为0，所以我们想让页面显示的字的大小也变成了0，没有元素撑起<div>元素的高度，因此<div>元素的高度也为0（不显示），因此出现白屏

解决方案是在下一级标签中再次设置font-size大小，将属性冲突，页面会显示后来设置的属性

以下代码简写，仅把修改的部分写了出来，其他部分与上文代码保持不变

	<div style="background-color: red; font-size: 0px;" id="father">
		<div style="background-color: blue; display: inline-block; font-size: 18px;" id="son1">我是大儿子</div>
		<div style="background-color: yellow;display: inline-block; font-size: 18px;" id="son2">我是二儿子</div>
	</div>

实现了我们想要的效果

今天我们一起学习了HTML常用的两种布局方式float与display：inlin-block各自的弊端与解决方案，方法没有最好，只有最适合，希望能对大家有一点帮助

#若有错误，欢迎各位批评指正，万分感谢！

潇雪凌宇

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
HTML常用布局方式float与display：inlin-block各自的弊端与解决方案

在HTMl页面布局中，float和display：inline-block是我们常用的布局属性，通过这两个属性，可以将块元素（block类型）并排放置，但是这两种方式都有他们的弊端，今天我们来一起学习一下。#作者一如既往的尽量用白话解释，让更多人能够看懂，如果有错误，欢迎批评指正，谢谢！#float使用float属性可以让多个块元素无缝贴合，同时可以控制它们是贴在左边还是右边...
复制链接

扫一扫