流与浮动

by miSunLaughing

HTML

<!-- 包裹性 -->
<div class="contain">
  <div class="float">
    <img src="https://fallbacks.carbonads.com/nosvn/fallbacks/731050e6bd3fc6979e1cb1a972294dae.png">
    测试文字测试文字测试文字测试文字测试文字
  </div>
</div>

<!-- 块状性, 你可以通过js获取该元素的style的display属性去验证 -->
<span class="float" id="toBlock">块状形</span>


<!-- 没有margin合并  你会发现下面第一个.contain元素和上面的.contain元素外间距为20px,而下面第一个和第二个.contain元素的外间距为30px-->
<div class="margin">
  <div class="box">margin-top合并</div>
  <div class="box">margin-top合并</div>
  <div class="box float">margin-top没有合并</div>
</div>

<!-- 高度塌陷 -->
<div>
  <div class="box" class="float">高度坍塌</div>
</div>


<!-- clear -->
<!-- 页面生成的元素，可以用浏览器的元素审查去查看高度 -->
<div class="clearb">
  <div class="contain" class="float">解决高度坍塌</div>
</div>


<!-- margin-top失效 -->
<div class="margin">
  <div class="box w50 float"></div>
  <div class="box w50 float"></div>
  <div class="box w50 clearl mt"></div>
</div>


<!-- 彩蛋 -->
<div class="egg">
  <div class="left-area">北京</div>
  <div class="right-area">测试文字</div>
</div>
<div class="egg">
  <div class="left-area">呼和浩特</div>
  <div class="right-area">测试文字</div>
</div>

CSS

.contain {
  width: 200px;
  height: 200px;
  border: 1px dashed #999;
}
.contain img {
  width: 150px;
}
.float {
  float: left;
}

.margin {
  margin-top:50px;
  height: 200px;
}


.box {
  height:20px;
  margin: 10px 0 20px;
  border: 1px dashed #999;
}
.w50 {
  width: 50px
}
.mt {
  margin-top: -999px;
}
.clearl {
  clear: left;
}
.clearr {
  clear: right;
}
.clearb::after {
   height: 0;
   content: '';
   display: block;
   clear: both;
}


/* 彩蛋 */
.egg {
  height: 30px;
  line-height: 30px;
  margin: 20px;
}

.left-area {
   background-color: #999; 
   height: 30px;
   border-radius:5px;
   float: left;
   margin-right: 10px;
}
.right-area {
  background-color: #999; 
  height: 30px;
  border-radius:5px;
  overflow: hidden;
}