老生常谈css中float的用法

下面是一个详细讲解“老生常谈css中float的用法”的攻略。

什么是float

float 是 CSS 属性，它可以让元素“浮动”到其容器的左侧或右侧。当一个元素设置了 float 属性后，它就会向左或向右移动，直到碰到父容器或另一个浮动元素的边缘为止。

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% 并使文字居中。

注意事项

• 父元素要设 overflow: hidden;，以防止由于子元素浮动造成父元素坍塌的问题。
• 确保浮动元素不会超出其父元素。假如一个浮动元素的宽度大于其容器的宽度，那么它会超出其容器的部分将无法显示。