css浮动属性的使用示范

浮动属性是CSS中常用的一种布局方式，可以使元素脱离文档流，从而实现多栏布局、文字环绕图片等效果。以下是一个简单的示范：

HTML代码：

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

CSS代码：

.container {
  width: 800px;
  margin: 0 auto;
}
.left {
  width: 200px;
  height: 300px;
  float: left;
  background-color: #ccc;
}
.right {
  width: 600px;
  height: 300px;
  float: right;
  background-color: #eee;
}

上面的代码实现了一个左侧宽度为200px，右侧宽度为600px的两栏布局。其中，左侧元素设置了float: left属性，右侧元素设置了float: right属性，这样它们就可以脱离文档流，分别靠左和靠右排列。同时，为了让容器元素包含浮动元素，需要在容器元素上设置clear: both属性，以清除浮动影响。