HTML/CSS - 清除浮动

最新推荐文章于 2025-06-12 15:01:55 发布

admin_cola

最新推荐文章于 2025-06-12 15:01:55 发布

阅读量409

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： HTML CSS 浮动

本文链接：https://blog.youkuaiyun.com/qq_37711033/article/details/68067241

HTML/CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的网页布局案例，利用CSS浮动属性使图片与文本并排显示，并通过清除浮动技术解决由此带来的布局问题。

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

目标：完成一个网页，排版如下：

基本思路是先定义背景DIV ，在里面放入图片块和文字块。代码如下：

<html>
<head>
<meta charset="utf-8">
<title>浮动清除</title>
<style title="text/css">

	.news{
		width: 600px;
		padding: 10px;
		margin: 0 auto;
		border: 1px solid #2200FF;
		background-color: aqua;
	}
	.news .content {
		border: 1px solid #FF0C10;
		width: 480px;
		height: 480px;
	}
</style>
</head>

<body>
<div class = "news">
	
	<img src = "timg.jpg" width="100" height="100">

	<div class = "content">
	<p>Bug一词的原意是“臭虫”或“虫子”；而在电脑系统或程序中隐藏着的一些未被发现的缺陷或问题，人们也叫它“bug”。</p>
	“Bug”的创始人:
	<p>
	格蕾丝·赫柏（Grace Murray Hopper），是一位为美国海军工作的电脑专家，也是最早将人类语言融入到电脑程序的人之一。而代表电脑程序出错的“bug” 这名字，正是由赫柏所取的。1945年的一天，赫柏对Harvard Mark II设置好17000个继电器进行编程后，技术人员正在进行整机运行时，它突然停止了工作。于是他们爬上去找原因，发现这台巨大的计算机内部一组继电器的触点之间有一只飞蛾，这显然是由于飞蛾受光和热的吸引，飞到了触点上，然后被高电压击死。所以在报告中，赫柏用胶条贴上飞蛾，并把“bug”来表示“一个在电脑程序里的错误”，“Bug”这个说法一直沿用到今天。
	与Bug相对应，人们将发现Bug并加以纠正的过程叫做“Debug”(中文称作“调试”），意即“捉虫子”或“杀虫子”。
	  后来就直接用bug 在很多的软件测试中 都用Bug来说明那些问题。
	  </p>
	</div>
	<div class = "clear"></div>
</div>
</body>
</html>

效果图：

要完成目标效果（文字块在图片右边）就要用到浮动，给文字加上右浮动

	.news .content {
		border: 1px solid #FF0C10;
		width: 480px;
		height: 480px;
		float: right;
	}

加上浮动的效果（原因是文字块在被加上浮动后，相当于“漂浮”在整个页面的上方，此时无法把背景的高给“撑起来”）：

为了避免这种情况的发生，这里就要用到浮动清除：

在背景块后加入一个新的空白div：clear，设置清除浮动属性：

	.clear{
		clear: both;
	}

再来看网页效果：

清除浮动的方法有很多，这里就不多赘述。顺便一提，用这个方法清除浮动时，为了避免使用过多无意义的标签，可以适当加入一些有意义的元素（如:网页页脚，站点信息的等）。