有一个常见需求：就是一个展示页上，左边显示一张图片，右侧加一些配套文字。效果如下：
当页面宽度增加时，图片响应变大，缩小时相应的变小。但图片的宽高比例不能改变。
这种布局，一般肯定可以用flex方法轻松实现，但考虑到兼容性的问题。不得不采用一些“老式”但兼容良好的做法：float方法。
这种就是一个父div包含2个子div，再对两个div左浮动。代码：
<div class="item">
<div class='img-div'><img class='img' src='alien-filled.bmp' /></div>
<div class='caption'>caption captioncaptioncaptioncaptioncaptioncacaptioncaptioncaptioncaptioncaptioncaptionptioncaptioncaptionccaptioncaptioncaptioncaptioncaptioncaptioncaptioncaptionaptioncaptioncaptioncaptioncaption</div>
</div>既然左浮动，就要清楚浮动，简单方法是在下面加个空标签：
<div class="item">
<div class='img-div'><img class='img' src='alien-filled.bmp' /></div>
<div class='caption'>caption captioncaptioncaptioncaptioncaptioncacaptioncaptioncaptioncaptioncaptioncaptionptioncaptioncaptionccaptioncaptioncaptioncaptioncaptioncaptioncaptioncaptionaptioncaptioncaptioncaptioncaption</div>
<div style='clear:both;height:0;overflow:hidden;'></div>
</div>全部的style如下：
.item{
border:1px solid black;
}
.img-div{
width:40%;
float: left;
}
.img{
width:100%;
}
.caption{
float: left;
width:59%;
word-break:break-all;
word-wrap:break-word;
box-sizing: border-box;
padding: 30px 0 0 30px;
}上面还加了对英文和数字不换行问题的处理：
word-break:break-all;
word-wrap:break-word;这两个属性的用法：
1. word-break:break-all和word-wrap:break-word的相同点：
都能使其容器如DIV的内容自动换行
2. 区别：
(1).word-break:break-all：
例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长，它会把单词截断，变成该行末端为
conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分。
(2).word-wrap:break-word：
例子与上面一样，区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。