Float使用

1.文字环绕效果

<p style="width:200px;height: 100%;overflow: hidden;word-wrap: break-word;">    <img style="float:left;width: 50px;height: 50px;background-color: red;">    这儿是文字，这儿是文字，这儿是文字，这儿是文字这儿是文字，这儿是文字这儿是文字，这儿是文字这儿是文字，这儿是文字这儿是文字，这儿是文字这儿是文字，这儿是文字这儿是文字，这儿是文字  </p>

实现文字环绕效果,注意设置overflow和word-wrap属性，否则无效果。

2. clear作用

元素设置clear熟悉后会使其不受其他浮动元素影响，会将浮动元素视为普通的元素。

<p style="height: 100%;overflow: hidden;word-wrap: break-word;">
    <img style="float:left;width: 50px;height: 50px;background-color: red;">
    这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，这儿是文字，
     <div style="clear: both;">我已设置clear</div>
  </p>