/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
* {
  margin: 0;
  padding: 0px;
}

.a {
  margin: 0 auto;
  max-width: 400px;
  height: 300px;
  border: 1px solid green;
  background: #234;
}

.b1 {
  width: 50px;
  height: 100px;
  float: left;
  background: #efa;
  border: 1px solid red;
  opacity: 0.5;;
}

.divNoFloat {
  background: blue;
  color: white;
}

.b2 {
  width: 50px;
  height: 100px;
  float: right;
  background: #efa;
  border: 1px solid red;
}

.b3 {
  width: 50px;
  height: 100px;
  float: right;
  background: #e3a;
  border: 1px solid red;
}

span {
  background: #eae;
}

.fa {
  margin: 0 auto;
  text-align: center;
  background: white;
  width: 200px;
  /* overflow: hidden; */
}

.son {
  margin: 0px 10px 10px 10px;
  background: #e7a;
  float: left;
}
</style>
</head>
<body>
  <div class="a">
    <div class="b1">11111</div>
    <div class="divNoFloat">这是一个不浮动的div, 文字虽然会让出区域，但起始处从边界开始，因为1111是浮动的，不在文档流之中</div>
    <span>this is a span， 同级的inline元素 ，说明了：<strong> 文字总是会让出float空间，本意就是图文混排</strong></span>
    <div class="b2">22222</div>
    <div class="b3">33333</div>
    <div></div>
  </div>
  <hr>
  <div class="a">
    <div class="fa">
        this is a father
        <div class="son"> son, 通常son中的内容会撑起father的高度,但当float了之后，由于不在文档流之中，自然也不会再撑起了,此时需要<strong>clear</strong> </div>
    </div>
  </div>


<script id="jsbin-source-css" type="text/css">* {
  margin: 0;
  padding: 0px;
}

.a {
  margin: 0 auto;
  max-width: 400px;
  height: 300px;
  border: 1px solid green;
  background: #234;
}

.b1 {
  width: 50px;
  height: 100px;
  float: left;
  background: #efa;
  border: 1px solid red;
  opacity: 0.5;;
}

.divNoFloat {
  background: blue;
  color: white;
}

.b2 {
  width: 50px;
  height: 100px;
  float: right;
  background: #efa;
  border: 1px solid red;
}

.b3 {
  width: 50px;
  height: 100px;
  float: right;
  background: #e3a;
  border: 1px solid red;
}

span {
  background: #eae;
}

.fa {
  margin: 0 auto;
  text-align: center;
  background: white;
  width: 200px;
  /* overflow: hidden; */
}

.son {
  margin: 0px 10px 10px 10px;
  background: #e7a;
  float: left;
}</script>
</body>
</html>

## jsbin.meliyuh.css
* {
  margin: 0;
  padding: 0px;
}

.a {
  margin: 0 auto;
  max-width: 400px;
  height: 300px;
  border: 1px solid green;
  background: #234;
}

.b1 {
  width: 50px;
  height: 100px;
  float: left;
  background: #efa;
  border: 1px solid red;
  opacity: 0.5;;
}

.divNoFloat {
  background: blue;
  color: white;
}

.b2 {
  width: 50px;
  height: 100px;
  float: right;
  background: #efa;
  border: 1px solid red;
}

.b3 {
  width: 50px;
  height: 100px;
  float: right;
  background: #e3a;
  border: 1px solid red;
}

span {
  background: #eae;
}

.fa {
  margin: 0 auto;
  text-align: center;
  background: white;
  width: 200px;
  /* overflow: hidden; */
}

.son {
  margin: 0px 10px 10px 10px;
  background: #e7a;
  float: left;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	* {
	margin: 0;
	padding: 0px;
	}

	.a {
	margin: 0 auto;
	max-width: 400px;
	height: 300px;
	border: 1px solid green;
	background: #234;
	}

	.b1 {
	width: 50px;
	height: 100px;
	float: left;
	background: #efa;
	border: 1px solid red;
	opacity: 0.5;;
	}

	.divNoFloat {
	background: blue;
	color: white;
	}

	.b2 {
	width: 50px;
	height: 100px;
	float: right;
	background: #efa;
	border: 1px solid red;
	}

	.b3 {
	width: 50px;
	height: 100px;
	float: right;
	background: #e3a;
	border: 1px solid red;
	}

	span {
	background: #eae;
	}

	.fa {
	margin: 0 auto;
	text-align: center;
	background: white;
	width: 200px;
	/* overflow: hidden; */
	}

	.son {
	margin: 0px 10px 10px 10px;
	background: #e7a;
	float: left;
	}
	</style>
	</head>
	<body>
	<div class="a">
	<div class="b1">11111</div>
	<div class="divNoFloat">这是一个不浮动的div, 文字虽然会让出区域，但起始处从边界开始，因为1111是浮动的，不在文档流之中</div>
	<span>this is a span，同级的inline元素，说明了：<strong> 文字总是会让出float空间，本意就是图文混排</strong></span>
	<div class="b2">22222</div>
	<div class="b3">33333</div>
	<div></div>
	</div>
	<hr>
	<div class="a">
	<div class="fa">
	this is a father
	<div class="son"> son, 通常son中的内容会撑起father的高度,但当float了之后，由于不在文档流之中，自然也不会再撑起了,此时需要<strong>clear</strong> </div>
	</div>
	</div>


	<script id="jsbin-source-css" type="text/css">* {
	margin: 0;
	padding: 0px;
	}

	.a {
	margin: 0 auto;
	max-width: 400px;
	height: 300px;
	border: 1px solid green;
	background: #234;
	}

	.b1 {
	width: 50px;
	height: 100px;
	float: left;
	background: #efa;
	border: 1px solid red;
	opacity: 0.5;;
	}

	.divNoFloat {
	background: blue;
	color: white;
	}

	.b2 {
	width: 50px;
	height: 100px;
	float: right;
	background: #efa;
	border: 1px solid red;
	}

	.b3 {
	width: 50px;
	height: 100px;
	float: right;
	background: #e3a;
	border: 1px solid red;
	}

	span {
	background: #eae;
	}

	.fa {
	margin: 0 auto;
	text-align: center;
	background: white;
	width: 200px;
	/* overflow: hidden; */
	}

	.son {
	margin: 0px 10px 10px 10px;
	background: #e7a;
	float: left;
	}</script>
	</body>
	</html>