上一篇文章讲解过一个《padding实现两栏自适应》，今天还是用这个类似的案例，讲解下，在maigin技巧，一侧定宽的自适应布局，避免文字环绕图片的方法！
注意：本文分享的方法，是基于margin可以改变无固定width和height的普通black水平元素宽度！
首先，看正常环绕的最简单代码：
<style>.box{width:250px;border:1pxsolid#f35}.boximg{float:left;border:1pxsolid;}</style><divclass="box"><imgsrc="tao/images/icon.png"><p>这里是右侧文字，这里是右侧文字，这里是右侧文字，这里是右侧文字，这里是右侧文字。这侧文字......</p></div>
注：只对图片进行了左浮动，右侧p标签也被浮动，文字环绕。
其次，再看使用margin-left改变p内文字的可是宽度，margin有可以改变不定宽元素的可视宽度的作用！
所以，看图：
<style>.box{width:250px;border:1pxsolid#f35}.boximg{float:left;border:1pxsolid;}.boxp{margin-left:120px;}</style><divclass="box"><imgsrc="tao/images/icon.png"><p>这里是右侧文字，这里是右侧文字，这里是右侧文.........</p></div>
如果觉得《CSS：margin 一侧定宽自适应布局 取消文字环绕图片的方法 – CSS – 前端 css文字重叠 解决》对你有帮助，请点赞、收藏，并留下你的观点哦！
