浮动与清除

by lai chendong

HTML

<div class="warper clearfix">
  <div class="box box1 pull-left"></div>
  <div class="box box2 pull-left"></div>
  <div class="box box3 pull-left"></div>
  <!-- <div style="clear:both"></div> -->
</div>
<p>
死跑龙套的说：行内元素浮动之后，就变块级的，可以设置宽高了
</p>

CSS

.warper{
  border:1px solid red;
  /* width:300px; */
  /* overflow:auto; */
  /* zoom:1; */
}
.box{
  width:100px;
  height:100px;
  opacity:0.8;
  margin:10px;
}
.box1{
  background:red;
  /* height:150px; */
}
.box2{
  background:yellow;
}
.box3{
  background:blue;
}
.pull-left{
  float:left;
}
.pull-left:after{
  content:"←"
}
.pull-right{
  float:right;
}
.pull-right:after{
  content:"→"
}
.clearfix:after{
  content:" ";
  display:table;
  clear:both;
}