下面是一个详细讲解“老生常谈css中float的用法”的攻略。
float 是 CSS 属性，它可以让元素“浮动”到其容器的左侧或右侧。当一个元素设置了 float 属性后，它就会向左或向右移动，直到碰到父容器或另一个浮动元素的边缘为止。
float 一般用于实现元素的排列效果，比如实现多栏、悬浮菜单、悬浮图片等。
html:
<div class="container">
<div class="left">左栏</div>
<div class="right">右栏</div>
</div>
css:
.container {
width: 100%;
overflow: hidden;
}
.left {
width: 200px;
float: left;
}
.right {
width: calc(100% - 200px);
float: right;
}
在上面的代码中，通过 float 先让左侧宽度为 200px 的元素向左浮动，然后让右侧元素向右浮动，并设置宽度为 100% 减去左侧宽度，从而实现了多栏效果。
html:
<div class="container">
<img src="example.jpg" alt="example" class="image">
<div class="text">这是一段图片描述文字</div>
</div>
css:
.container {
position: relative;
width: 100%;
}
.image {
width: 50%;
float: left;
}
.text {
position: absolute;
top: 0;
left: 50%;
width: 50%;
text-align: center;
}
在上面的代码中，通过 float 先让图片元素向左浮动并设置宽度为 50%，再用 position:absolute; 让描述文字元素相对于其父元素定位。最后通过设置 left:50% 和 width: 50% 将其宽度设为图片的 50% 并使文字居中。
本文链接：http://task.lmcjl.com/news/15813.html