.left-img {
float: left;
margin-right: 10px;
}以上代码是一个常用的将图片向左浮动并留出一定空隙的样式。但是，有时候大家会发现图片并没有按照预期的位置显示，它们可能会叠加在一起或者被覆盖。这是因为大家没有考虑到以下几个问题：
1. 父容器没有清除浮动。
当一个容器中包含浮动元素时，容器的高度无法被自动撑开，从而会导致布局混乱。解决这个问题的方法有很多，其中比较常用的是清除浮动，可以在父容器末尾添加一个clearfix样式：
.parent:after {
content: "";
display: block;
clear: both;
}2. 图片宽度超过父容器宽度。
在没有设置图片宽度的情况下，图片的宽度默认是原图宽度。如果图片宽度超过了父容器的宽度，那么它将会溢出容器，导致布局问题。解决这个问题的方法有两种：一种是给图片设置最大宽度为父容器的宽度；另一种是将图片缩小至父容器宽度内。具体代码如下：
.left-img {
float: left;
margin-right: 10px;
max-width: 100%;
}
.left-img img {
max-width: 100%;
height: auto;
}以上代码中，大家先将图片最大宽度设置为100%（即不超过父容器宽度），然后再将图片的宽度设置为100%（保证宽度自适应，高度自动计算）。
通过以上两点注意事项，大家可以避免大部分布局问题，达到理想的显示效果。