元素的浮动

1、浮动元素会脱离网页文档,与其他元素发生重叠但是，不会与文字内容发生重叠，如下面案例：

1) 通过元素的浮动，可以生成文字浮动的效果

 代码：

<style type="text/css">
	.d1{
		height: 200px;
		width: 200px;
		background-color: red;
		float: left;
	}
	.d2{
		height: 300px;
		width: 500px;
		background-color: skyblue;
	}
</style>
<p>文字环绕效果</p>
<div class="d1"></div>
<div class="d2">
	文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
	文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
	文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
</div>

2)横向排版布局

代码：

<style type="text/css">
	.d1{ width: 200px; background-color: red; }
	.d2{ width: 700px; background-color: skyblue; }
	.d3{ width: 200px; background-color: yellow; }
	.d1,.d2,.d3{ height: 200px; float: left; }
</style>

<p>横向排版</p>
<div class="d1"></div>
<div class="d2">
	文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
	文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
	文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
</div>
<div class="d3"></div>

2、当元素浮动时，解决重叠的方式，有以下几种：

1). clear:both,left,right；clear属性，清除浮动，左浮动，右浮动

例如：黑色区域的高度设置了300px，由于红黄蓝区域都设置了左浮动，遮盖了黑色区域

 代码：

<style type="text/css">
    .a{ width: 20%; background: red; }
	.b{ width: 60%; background: yellow; }
	.c{ width: 20%; background: blue; }
	.a,.b,.c{ float: left; height: 200px;}
	.d{ height: 300px; background: #000000;}
</style>

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

给d添加样式clear: left或者both clear表示清除浮动

.d { clear: left;}

效果： 2).给红黄蓝外侧加一个div，设置该div的高度

<style type="text/css">
    .out { height: 200px;}
</style>
<div class="out">
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
</div>
<div class="d"></div>

 3).设置out盒子的overflow属性为auto，overflow：auto的含义是对于超出边界的元素，父元素可以自动调整高度

.out { overflow: auto;}

3、聊天小案例

效果：

 代码：

<style type="text/css">
	ul {
		width: 500px;
		margin: auto;
		background-color: #87CEEB;
		overflow: auto;
		padding: 0px;
	}
	li{
		margin: 5px 15px;
		height: 50px;
		line-height: 50px;
	}
	img {
		height: 50px;
		width: 50px;
		margin: 0px 10px;
	}
	.dog {
		float: left;
		clear: both;
	}
	.cat {
		float: right;
		clear: both;
	}
</style>
<!-- 聊天小案例 -->
<ul type="none">
	<li class="dog"><img src="img/dog.png" />你好！</li>
	<li class="cat">你好！吃饭了没？<img src="img/cat.png" /></li>
	<li class="dog"><img src="img/dog.png" />吃了，你呢？</li>
	<li class="cat">还没，好饿！<img src="img/cat.png" /></li>
	<li class="dog"><img src="img/dog.png" />狗粮你要不要？</li>
	<li class="cat">拿来吧你！<img src="img/cat.png" /></li>
	<li class="dog"><img src="img/dog.png" />哎嗨，不给！</li>
	<li class="cat">呸，你是真的狗<img src="img/cat.png" /></li>
	<li class="dog"><img src="img/dog.png" />我本来就是狗</li>
</ul>

4、浮动元素在排列时，只参考前一个元素的位置即可

总结：

1、浮动元素的重叠问题：

a.不会覆盖文字内容

b.不会覆盖图片内容

c.不会覆盖表单元素（输入框，单选按钮，复选框，按钮，下拉选择框）

2、解决覆盖问题

a.清除浮动clear: both/left/right

b.给浮动元素添加父元素，并设置父元素的高度

c.设置浮动元素的父元素的overflow为auto，让其父元素高度自动撑开

3、浮动元素排列问题

参考前一个浮动元素的位置