.left {
float: left;
}
.right {
float: right;
}在实际开发中，大家通常使用左浮动来实现多列布局，右浮动用于文字环绕图片等布局。例如：
<div class="wrapper"> <div class="left-column"> 左侧内容 </div> <div class="right-column"> <img src="picture.jpg" alt="图片"> <p>右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容</p> </div> </div>
在上述代码中，大家使用了左右浮动，将左侧内容与右侧图片和文字分别布局。同时，也让文字围绕着图片，实现了文本环绕的效果。
需要注意的是，如果浮动元素的宽度过大，可能会导致布局错乱。这时需要设置元素宽度或使用清除浮动的方法。例如：
.clear {
clear: both;
}
<div class="wrapper">
<div class="left-column">
左侧内容
</div>
<div class="right-column">
<img src="picture.jpg" alt="图片">
<p>右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容右侧文字内容</p>
<div class="clear"></div>
</div>
</div>以上代码中，大家增加了一个空的div元素，利用clear属性清除了浮动，确保布局的正确性。
综上所述，左右浮动是CSS布局中的一种常用方式。在实际开发中，需要注意浮动元素的大小、清除浮动等细节，以确保页面的布局正确性。