摘要：<html><head><title>关于定位和浮动</title><style type="text/css">.box1{ width: 200px; height: 200px; position: relative; left: 50px; background-color: red;}.box2{ width
<html>
<head>
<title>关于定位和浮动</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
position: relative;
left: 50px;
background-color: red;
}
.box2{
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 80px;
}
ul li{
width: 100px;
height: 50px;
background-color:#ccc;
list-style: none;
float: left;
margin: 0px 1px;
}
.box3{
width: 100px;
height: 100px;
background: red;
}
.box4{
clear:both;
/*margin: 500px;*/
}
</style>
</head>
<body>
<div class="box1">相对定位
<div class="box2">绝对定位</div>
</div>
<ul>
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
<div class="box4"></div>
<div class="box3"> div1</div>
<div class="box3"> div2</div>
<div class="box3"> div3</div>
</body>
</html>
关于清除浮动clear:both； 如果不清除的话 用直接用magin：像素; 直接向下也是可以的 那么请问老师 这两种有什么区别和弊端？
批改老师：西门大官人批改时间：2019-04-20 13:24:22
老师总结：首先，从架构上盾，不清除浮动，会造成日后对浮动层的任何修改都可能影响到后面的元素定位。其次：用margin处理后，虽然表面上达到了效果，但是是强制给元素加了外边框，这个边框是有固定像素的。那么一但浮动有变化。会造成margin不准确，页面可能会错乱
