CSS浮动（一）

有点帅气在身上

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

阅读量1.2k

点赞数 3

文章标签：前端 javascript css

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

本文链接：https://blog.csdn.net/weixin_50777322/article/details/125708162

版权

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

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

文章目录

CSS布局之浮动与清除（float&clear）
一、浮动介绍
二、浮动的属性
- 1.Float属性
- 2.Clear属性
总结

一、浮动介绍

（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>