CSS中元素位置浮动的处理——续：
基础概念介绍：
如何消除浮动的影响：
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素浮动</title>
<style type="text/css">
#d0,p {
width:450px;
border:1px solid #000;
}
#d0>div {
width:100px;
height:100px;
margin:10px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
}
/* 浮动 */
/* #d1,#d2,#d3 {
float:right;
} */
/* 浮动 */
#d1,#d2,#d3 {
float:left;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
<p>浮动时看看我的位置</p>
</body>
</html>最终页面效果
p元素受到了浮动的影响与浮动的几个div层叠在一起。
消除左浮动：可添加如下样式代码
/*消除浮动影响(叔叔)*/
p {
clear: left;
} 修改后页面效果：
P元素不受浮动影响了 ，但浮动元素的父元素仍受影响。
如何解决呢？添加如下代码：添加一个空的div，并清除它的浮动即可
代码如下：
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div><!-- 添加一个空div -->
</div>
<p>浮动时看看我的位置</p>
</body>/* 消除浮动影响（父亲） */
#d0>#d4 {
width:0;
height:0;
clear:left;
}这样修改后页面效果：
