css浮动学习
意外2019-04-03 13:17:01184<!DOCTYPE html>
<html>
<head>
<title>css中的浮动</title>
<style type="text/css">
li{
list-style: none; /*列表样式去掉*/
width: 80px;height: 40px;
background: #ccc;
line-height: 40px;
text-align: center;
margin-left: 2px;
float: left;
}
.clear{clear: both;} /*也有上下左右之分*/
.box{
width: 100px;height: 100px;
background: red;
float: right;
margin: 100px 100px;
}
</style>
</head>
<body>
<!-- 一般两个块级元素是向下排列的,用浮动就可以使他们并列在一行;浮动用完后必须消除 -->
<ul>
<li>html</li>
<li>js</li>
<li>web</li>
<li>php</li>
</ul>
<!-- 上面有用到浮动,那么后面布局就要清除浮动 -->
<div class="clear"></div>
<div class="box"></div>
</body>
</html>