码迷,mamicode.com
首页 > Web开发 > 详细

CSS—DIV浮动定位 消除影响

时间:2017-09-25 14:36:15      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:width   idt   set   order   oat   ext   html   tle   doc   

<!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>

CSS—DIV浮动定位 消除影响

标签:width   idt   set   order   oat   ext   html   tle   doc   

原文地址:http://www.cnblogs.com/Bighua123/p/7591491.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!