CSS布局-Float(浮动)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="image/icon-x" href="images/logo.png">
<title>CSS Float(浮动)</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{background: url(images/2.jpg) no-repeat right top;font-family: 楷体;}
/*float 属性实现元素的浮动，属性值（left right）
特点：浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止,
浮动使元素的位置与文档流无关，因此不占据空间。*/
li{width: 100px;height: 40px; background: pink;list-style: none;float: left;margin-left: 20px;}
.box{ border: 2px solid red; }
.one{width: 100px;height: 100px;background: #ccc;float: left;}
.two{width: 100px;height: 100px;background: #ff6500;float: right;}
/*清除浮动*/
.clear{clear: both;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="clear"></div>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="clear"></div>
</div>
</body>
</html>
