暑期学习日记16：浮动

土肥圆波太郎

已于 2022-07-31 21:55:51 修改

阅读量71

点赞数

文章标签：学习

于 2022-07-27 22:55:47 首次发布

本文链接：https://blog.csdn.net/weixin_48485475/article/details/126024975

版权

1.float 属性规定元素如何浮动。float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧

right - 元素浮动在其容器的右侧

none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。

inherit - 元素继承其父级的 float 值

如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style>
	img {
		width: 100px;
		float:left;
	}
</style>
</head>
<body>
<p>图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
<img src="图片1.jpg">
<p>图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
<p>图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
<p>图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
<p>图像会在段落中向左浮动，而段落中的文本会包围这幅图像。</p>
</body>
</html>

显示效果为：

2.clear 属性用于清除浮动。clear 属性可设置以下值之一：

none - 允许两侧都有浮动元素。默认值

left - 左侧不允许浮动元素

right- 右侧不允许浮动元素

both - 左侧或右侧均不允许浮动元素

inherit - 元素继承其父级的 clear 值

如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动</title>
<style>
	.div1{
		width: 100px;
		background-color: red;
		float: left;
	}
	.div2{
		width: 200px;
		height: 50px;
		background-color: aqua;
	}
	.div3{
		width: 100px;
		background-color: red;
		float: left;
	}
	.div4{
		width: 200px;
		height: 50px;
		background-color: aqua;
		clear: left
	}
</style>
</head>
<body>
<h2>不使用clear:</h2>
<div class="div1">div1向左浮动</div>
<div class="div2">div2的文字会环绕div1</div>
<h2>使用clear:</h2>
<div class="div3">div3向左浮动</div>
<div class="div4">div4中clear: left；清除了向左浮动</div>
</body>
</html>

显示效果为：

3.通过使用 float 属性，可以轻松地并排浮动内容框，如：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33%;
  padding: 100px;
}
</style>
</head>
<body>
  <div class="box" style="background-color:#bbb">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ccc">
  <p>框中的一些文本。</p>
  </div>
  <div class="box" style="background-color:#ddd">
  <p>框中的一些文本。</p>
  </div>
</body>
</html>

显示效果为：