浮动
浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版
float:left/right
<head>
<style type="text/css">
img {
float:left;
}
</style>
</head>
<body>
<p>
<img src="img/yiyan.jpg" width="200px" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>清除浮动
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrapper{
border: 1px solid black;
width: 360px;
height: 360px;
}
.content{
/*float: left; 排列，会按照父级来排*/
float: left;/* 会按照从左向右浮动 */
/*float: right;*/
width: 70px;
height: 70px;
border: 1px red solid;
background-color: green;
color: white;
}
#id9,#id8{
/*清除浮动，因为content浮动后面的div都会根着浮动，清楚 id8,id9不能左浮动（标准的从上往下显示）*/
clear: left;
clear: right;
clear: both; /*清楚左右浮动 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div id="id8" class="content">8</div>
<div id="id9" class="content">9</div>
</div>
</body>解决浮动塌陷问题
<style>
#box1{
width: 600px;
background-color: olive;
border: 1px solid red;
height: 400px; /* 方式一：解决浮动塌陷问题，给父级设置固定高 */
overflow: hidden; /* 方式二：解决浮动塌陷问题，给父级overflow: hidden */
}
img{
float: left;
}
/* 方式三：在浮动的下面清楚浮动 */
.divclass{
clear: left;
clear: right;
clear: both; /*清楚左右浮动 */
}
</style>
</head>
<body>
<div id="box1">
<div>
我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
</div>
<img src="img/江一燕.jpg" width="200px" />
<div class="divclass"></div>
</div>
</body>
