SOURCE

<p>1 元素包含浮动元素</p>

<header>
  <h1>xxx 系统</h1>
  <ul>
    <li><a href="">index</a></li>
    <li><a href="">news</a></li>
    <li><a href="">product</a></li>
    <li><a href="">about</a></li>
  </ul>
  <div class="clear"></div>
</header>

<p>=======================我是分割线=============================</p>
<p>2 浮动元素包含其他元素</p>
<p>父元素float后，变为block元素，可以设置宽高，并且包裹了子元素，不在单独占一行</p>

<p class="float-container">
  <span>surranded by float element</span>
</p>

*{
  color:red;
}

header{
  border:1px solid red;
}

header h1{
  float:left;
}

ul li{
  float:left;
  width:100px;
}

.clear{
  clear:both;
}

/* 2   浮动元素包含其他元素 */

.float-container{
  /*包裹性*/
  
  float:left;
  border:1px solid red;
  width:200px;
  height:399px;
}