您可以将元素“浮动”到右侧或左侧，以便其他内容在其周围流动。
CSS浮点型属性使您能够确定相对于页面上其他元素的元素的位置。使用float属性时，其他元素将简单地环绕您应用float的元素。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
向左浮动示例
在此示例中，我们将<div>元素设置为，这将导致其余内容环绕它。float:left文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
请注意，我在框的右侧和底部应用了边距，以便其余内容不会直接与框相对。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
<!DOCTYPE html>
<title>Example</title>
<style>
.float-left {
float: left;
padding: 20px;
margin: 0 10px 10px 0;
background: gold;
}
</style>
<div class="float-left">
向左浮动
</div>
<p>
此文本重新排列自身以围绕向左浮动的元素流动。 </p>
<p>我在浮动框的右侧和底部添加了一个边距，以便此文本不会直接与之相对。使用属性值以查看它如何更改布局。</p>浮动右示例
在此示例中，我们将<div>元素设置为，这将导致其余内容环绕它。float:right文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
在这种情况下，我保留下边距，但将右边距移到框的左侧。文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
<!DOCTYPE html>
<title>Example</title>
<style>
.float-right {
float: right;
padding: 20px;
margin: 0 0 10px 10px;
background: gold;
}
</style>
<div class="float-right">
向右浮动
</div>
<p>此文本重新排列自身以围绕向右浮动的元素流动。 </p>
<p>我在浮动框的左侧和底部添加了一个边距，以便此文本不会直接与之相对。使用属性值以查看它如何更改布局。</p>并排对齐框
在这里，我们使用<div>元素并排对齐。通常，这些元素会堆叠在一起，但是通过使用，我们可以使它们彼此相邻显示。float:leftfloat:left文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
<!DOCTYPE html>
<title>Example</title>
<style>
div {
float: left;
padding: 20px;
}
.gold {
background: gold;
}
.limegreen {
background: limegreen;
}
.orange {
background: orange;
}
</style>
<div class="gold">
金
</div>
<div class="limegreen">
石灰绿
</div>
<div class="orange">
橙
</div>文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html文章源自淘咖首码项目网 https://www.youranweb.com/淘咖首码项目网-https://www.youranweb.com/271.html
评论