<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>消除浮动影响</title>
<style type="text/css">
#d0,p{
border: 1pX solid red;
width: 400PX;
}
#d1,#d2,#d3{
width:100px;
height: 100PX;
margin: 10PX;
}
#d1{
background-color: #f00;
}
#d2{
background-color: #0f0;
}
#d3{
background-color: #00f;
}
/*浮动*/
#d1,#d2,#d3{
float: left;
}
/*消除浮动影响：
在哪个元素上加clear，则该元素就不受影响，他会出现在所有浮动元素的下方*/
#d4{
clear: left;
}
</style>
</head>
<body>
<div id="d0">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</div>
<p>浮动时看看我的位置在哪里</p>
</body>
</html>
时间： 2024-10-19 10:01:57