<h2>文本环绕</h2>

<div class="outer">
  <div class="float">浮动元素</div>
  在父元素内部，当文本足够多时，文本将会环绕浮动元素进行布局。
</div>

<h2>浮动元素冲出父元素</h2>

<div class="outer">
  <div class="float">浮动元素</div>
  文本较少。
</div>

<h2>触发 BFC 后</h2>

<div class="outer overflow">
  <div class="float">浮动元素</div>
  文本较少。
</div>

html {
  background-color: #333;
  color: #444;
  font: 1em Arial, sans-serif;
  padding:15px;
}
h2{color:#FFF; width:100%;}

.outer {
  background:#d1c4e9;
  width: 300px;
  padding: 15px;
  margin-bottom: 40px;
  box-sizing:border-box;
}

.float {
  padding: 1em;
  background-color: #673ab7;
  color: #fff;
  float: left;  
  width: 100px;
  margin: 0 20px 0 0;
}

.overflow {
  overflow: auto;
}



Resources1×0.5×0.25×Rerun