本文主要讲解如何清除浮动的影响，浮动排列的问题，浮动的顺序问题及浮动的重叠问题。
浮动
浮动的初步应用
浮动会使元素脱离网页文档与其他元素发生重叠，但是，不会与文字内容发生重叠，类似与文字环绕效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.blue{
width: 100px;height: 100px;
background-color: blue;
float: left;
}
.red{
width: 200px;height: 150px;
background-color: red;
}
</style>
</head>
<body>
<p>文字环绕效果</p>
<div class="blue"></div>
<div class="red">1文字环绕效果2文字环绕效果3文字环绕效果</div>
</body>
</html>
清除浮动的影响
在使用浮动的时候我们发现，浮动不会对上一个元素产生影响，但会对接下来的元素产生影响，类似与上面的文字环绕中，蓝色的区域覆盖在了红色区域上方，如何清除浮动呢？
方法一
将浮动元素和不浮动的元素割分开，即将浮动元素置入一个div容器中，这样就可以使接下来的元素是与该div并列的，不受浮动的影响。
不清除浮动效果
在我们不清除浮动效果时，后面元素会受那些影响呢，以横向排版为例：
css：
<style type="text/css">
.a{
width: 20%;
background-color: blue;
}
.b{
width: 60%;
background-color: orange;
}
.c{
width: 20%;
background-color: pink;
}
.a,.b,.c{
float: left;
height: 200px;
}
.d{
height: 300px;
background-color: black;
}
</style>
body：
<body>
<p>横向排版布局</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>
不清除浮动效果：
将蓝、橙、粉三个div块使用float横向排版后，在不清除浮动效果的情况下，黑色的div块被遮挡住了，本来是300像素的黑色div块，最后只显示了100像素的区域。
父元素包裹
接下来将上面横向排版的浮动元素用一个div（此时作为父元素）包裹起来。
css：
<style type="text/css">
.a{
width: 20%;
background-color: blue;
}
.b{
width: 60%;
background-color: orange;
}
.c{
width: 20%;
background-color: pink;
}
.a,.b,.c{
float: left;
height: 200px;
}
.d{
height: 300px;
background-color: black;
}
.e{
height: 200px;
}
</style>
body：
<body>
<p>横向排版布局</p>
<div class="e">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="d"></div>
</body>
效果：
此时横向排版的浮动影响就已经清除了
**注意：**父元素（class属性为e的div）与子元素（class属性为a，b，c的div）的高度是相同的，皆为200px。此时的父元素相当于将浮动元素空缺的内容填补上了，从而达到不影响接下来元素的排版。
假如父元素不设置高度：
css：
.e{
/* height: 200px; */
border: solid red 5px;
}
效果：
此时我们就会发现仅仅用父元素包裹住浮动元素并没有效果，需要对父元素进行高度的设置才行。
这里就有了一个疑问了，为什么父元素不会对里面内容自适应呢，还需要额外的手动设置高度。
因为元素浮动了以后，父元素不能知道里面子元素的高度了。
面对这种情况，共有两种解决方法，一种是直接设置高度height:px，另一种样式：overflow:auto;该样式的效果就是对于超出边界的元素，父元素可以自动调整。
css：
.e{
/* height: 200px; */
/* border: solid red 5px; */
overflow: auto;
}
效果：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.a{
width: 20%;
background-color: blue;
}
.b{
width: 60%;
background-color: orange;
}
.c{
width: 20%;
background-color: pink;
}
.a,.b,.c{
float: left;
height: 200px;
}
.d{
height: 300px;
background-color: black;
}
.e{
/* height: 200px; */
/* border: solid red 5px; */
overflow: auto;
}
</style>
</head>
<body>
<p>横向排版布局</p>
<div class="e">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="d"></div>
</body>
</html>
效果:
方法二
不清除浮动效果
使用clear清除浮动的影响
clear:left/right/both;，表示当前元素不会受到左/右/左右浮动的影响
css:
<style type="text/css">
ul{
width: 300px;
height: 500px;
border-width: 1px;
border-style: solid;
border-color: orange;
margin: auto;
}
.left{
float: left;
}
.right{
float: right;
}
li{
width: 20px;
height: 20px;
background-color: pink;
margin: 10px 0;
/* clear: both; */
list-style: none;
text-align: center;
}
.clear-left{
clear: left;
}
.clear-right{
clear: right;
}
.clear-both{
clear: both;
}
</style>
body:
<body>
<div class="f">
<ul>
<li class="left">1</li>
<li class="right">2</li>
<li class="left">3</li>
<li class="right">4</li>
<li class="left">5</li>
</ul>
</div>
</body>
效果:
清除左浮动的影响
接下来先添加清除左浮动的影响：
body:
<body>
<div class="f">
<ul>
<li class="left">1</li>
<li class="right clear-left">2</li>
<li class="left">3</li>
<li class="right">4</li>
<li class="left">5</li>
</ul>
</div>
</body>
效果:
清除右浮动的影响
在添加清除右浮动的影响：
body:
<body>
<div class="f">
<ul>
<li class="left">1</li>
<li class="right clear-left">2</li>
<li class="left clear-right">3</li>
<li class="right">4</li>
<li class="left">5</li>
</ul>
</div>
</body>
效果:
清除左右浮动的影响
接下来是清除左右浮动的影响:
body:
<body>
<div class="f">
<ul>
<li class="left">1</li>
<li class="right clear-left">2</li>
<li class="left clear-right">3</li>
<li class="right">4</li>
<li class="left clear-both">5</li>
</ul>
</div>
</body>
效果:
浮动互不影响(完整代码)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
ul{
width: 300px;
height: 500px;
border-width: 1px;
border-style: solid;
border-color: orange;
margin: auto;
}
.left{
float: left;
}
.right{
float: right;
}
li{
width: 20px;
height: 20px;
background-color: pink;
margin: 10px 0;
clear: both;
list-style: none;
text-align: center;
}
.clear-left{
clear: left;
}
.clear-right{
clear: right;
}
.clear-both{
clear: both;
}
</style>
</head>
<body>
<div class="f">
<ul>
<li class="left">1</li>
<li class="right">2</li>
<li class="left">3</li>
<li class="right">4</li>
<li class="left">5</li>
</ul>
</div>
</body>
</html>
效果:
浮动元素的排列
浮动元素在排列时，只参考前一个元素位置即可。
下图为三个横向排版的三个元素，样式均采用float:left;，随后在添加一个元素，宽度超过粉色元素左边的区域，样式也采用float:left，该元素会出现在哪里呢。
按照开始所说，黑色元素一个参照粉色元素的位置，如图:
有兴趣的朋友可以尝试一下。
情况一：
.a{
width: 20%;
height: 100px;
background-color: blue;
}
.b{
width: 50%;
height: 200px;
background-color: orange;
}
.c{
width: 20%;
height: 300px;
background-color: pink;
}
情况二：
.a{
width: 20%;
height: 300px;
background-color: blue;
}
.b{
width: 50%;
height: 200px;
background-color: orange;
}
.c{
width: 20%;
height: 100px;
background-color: pink;
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.a{
width: 20%;
height: 100px;
background-color: blue;
}
.b{
width: 50%;
height: 200px;
background-color: orange;
}
.c{
width: 20%;
height: 300px;
background-color: pink;
}
.a,.b,.c,.d{
float: left;
font-size: 30px;
color: white;
}
.d{
width: 20%;
height: 300px;
background-color: black;
}
.e{
border: solid red 5px;
overflow: auto;
}
</style>
</head>
<body>
<p>横向排版布局</p>
<div class="e">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
<div class="d">D</div>
</div>
</body>
</html>
左右浮动的顺序
值得注意是，左右浮动时，浮动元素顺序是不一样的。
左浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.a{
width: 20%;
height: 100px;
background-color: blue;
}
.b{
width: 50%;
height: 200px;
background-color: orange;
}
.c{
width: 20%;
height: 300px;
background-color: pink;
}
.a,.b,.c,.d{
float: left;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</body>
</html>
效果：
右浮动：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.a{
width: 20%;
height: 100px;
background-color: blue;
}
.b{
width: 50%;
height: 200px;
background-color: orange;
}
.c{
width: 20%;
height: 300px;
background-color: pink;
}
.a,.b,.c,.d{
float: right;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</body>
</html>
效果：
浮动元素的重叠
1.浮动元素不会覆盖文字内容
2.浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以把图片看做一个特殊的文字）
3.浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮、下拉选择框等）
127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
