CSS浮动（一）

有点帅气在身上

已于 2022-07-10 20:32:20 修改

阅读量1.4k

点赞数 3

文章标签：前端 javascript css

于 2022-07-10 20:31:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50777322/article/details/125708162

版权

本文介绍了CSS中的浮动和清除属性，包括float属性的left和right设置，以及clear属性如何防止元素受到浮动元素的影响。示例代码展示了如何实现元素浮动及清除浮动，帮助理解这两者在网页布局中的作用。

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

CSS布局之浮动与清除（float&clear）

第一阶段 CSS学习之浮动的使用

一、浮动介绍

（1）什么是浮动？
浮动是指将元素向左或向右移动，同时其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

（2）浮动带来的影响
1、由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素；若没有给父元素设置高度，那么父元素就不会在显示屏上显示。
2、浮动元素不再占用原文档流的位置，它会对后面的元素排版产生影响。

二、浮动的属性

1.Float属性

（1）float 属性规定元素如何浮动。
（2）float 属性可以设置以下值之一：
----left - 元素浮动到其容器的左侧
----right - 元素浮动在其容器的右侧
----none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
----inherit - 元素继承其父级的 float 值

展现元素向右浮动代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#main{
		width: 100px;
		height:100px;
		background-color: black;
		border: 1px solid black;
		border-radius: 100px;
        float:right;

	}
	</style>
</head>
<body>
	<div id="main"></div>
</body>
</html>

在这里插入图片描述

2.Clear属性

（1）clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#main{
		width: 100px;
		height:100px;
		background-color: black;
		border: 1px solid black;
		border-radius: 100px;
        float:right;

	}
    #main1{
		width: 100px;
		height:100px;
		background-color: black;
		border: 1px solid black;
		border-radius: 100px;
        clear:right
	}
	</style>
</head>
<body>
	<div id="main"></div>
    <div id="main1"></div>
</body>
</html>