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>
显示效果为: