大家思考一下如何让图片与文字都靠在左边呢？
是不是为图片style添加float:left;同时把新<div>的float改为left？
我们试试看！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
</div>
页面效果：
效果完全不对，图片和文字跑到外边来了。
这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改<img>属性也不是修改<div>属性，而是增加一组空的<div></div>标签！给这个新的空的<div>的style设置为"clear:both"即可修正。
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>
页面效果如下：
值得注意的是，如果您不使用<div>的话直接使用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会出现上面的情况。
代码如下：
<body>
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">学习网页制作非常有趣！</p>
</body>
页面显示效果如下：
大家观察一下，文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况，而且文字也变小的问题在以后的讲解中我们再深入探讨！
现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细说明。
疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML完整学习目录
