上一篇文章講解過一個《padding實現兩欄自適應》，今天還是用這個類似的案例，講解下，在maigin技巧，一側定寬的自適應布局，避免文字環繞圖片的方法！

注意：本文分享的方法，是基于margin可以改變無固定width和height的普通black水平元素寬度！

首先，看正常環繞的最簡單代碼：

<style>
 .box{width: 250px; border: 1px solid #f35}
 .box img{float: left; border: 1px solid;}
</style>
<div class="box">
 <img src="tao/images/icon.png">
 <p>這里是右側文字，這里是右側文字，這里是右側文字，這里是右側文字，這里是右側文字。
 這側文字......</p>
</div>

注：只對圖片進行了左浮動，右側p標簽也被浮動，文字環繞。

其次，再看使用margin-left改變p內文字的可是寬度，margin有可以改變不定寬元素的可視寬度的作用！

所以，看圖：

<style>
 .box{width: 250px; border: 1px solid #f35}
 .box img{float: left; border: 1px solid;}
 .box p{margin-left: 120px;}
</style>
<div class="box">
 <img src="tao/images/icon.png">
 <p>這里是右側文字，這里是右側文字，這里是右側文.........</p>
</div>