SOURCE

console 命令行工具 X clear

                    
>
console
<div class="box">
  <div class="float">
    haha
  </div>
  <div class="txt">
    一个BFC会停止去围绕浮动元素。元素元素元素元素元素元素元素元素。
  </div>
</div>

<img class="float-left"  src="https://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" alt="" />
<div class="follow">
  我设置了margin-left:20px; 但是,我依然像个脑残粉,被左边这个妹子牢牢吸住。为什么会这样,难道这种布局没法撑开间距吗?还是因为我打开的方式不对?谁来告诉我为什么!!
</div>
* {
  padding:0;
  margin:0;
}
.float {
  width:50px;
  height:65px;
  border: 2px dotted red; 
  float : left;
}
.txt {
  width:100px;
  /*float:left;*/
  border:1px solid green;
}
.float-left {
  margin-top:20px;
  float:left;
}
.follow{
    margin-top:20px;
    margin-left: 20px;
    background-color: #cad5eb;
    letter-spacing: 5px;
    overflow: auto;
    border:2px dotted red;
}