css 浮动 使用

CSS中的浮动（float）属性用于控制元素的位置和布局。浮动元素会从文档流中脱离出来，并且可以左右移动。常用于实现文本环绕图片、多列布局等效果。

浮动的取值有left和right，分别表示向左和向右浮动。使用浮动属性的元素会在水平方向上移动到最左边或最右边，直到碰到包含块或另一个浮动元素为止。如果两个浮动元素的宽度相加大于包含块的宽度，则第二个元素会被移动到下一行。

浮动元素的高度默认为其内容的高度，如果浮动元素的高度大于其包含块的高度，则会导致包含块塌陷。解决包含块塌陷可以使用clear属性清除浮动。

例如，以下代码实现了一个图片左浮动，文字环绕图片的效果：

<div class="container">
  <img src="example.jpg" alt="example" class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac tellus eget ex blandit rutrum. Sed euismod, mauris in commodo convallis, lectus nisi tincidunt nisl, non hendrerit dolor massa ut tellus. Nullam ultrices, mauris vel tempor iaculis, mi dolor viverra nibh, a lacinia arcu enim eu nunc.</p>
</div>

.float-left {
  float: left;
  margin-right: 10px;
}

上述代码中，将图片元素的浮动属性设置为left，使其左浮动。同时为了让图片和文字之间保持一定距离，设置了图片元素的右外边距为10px。

需要注意的是，使用浮动属性布局时需要考虑浏览器窗口大小的变化和不同设备的屏幕尺寸，以保证页面的响应式布局。