浮动
- 浮动的块会脱离当前的文档流,会飘起来,可以向左或者向右移动,直到它的边缘碰到包含框或者另一个浮动的边框为止。
#采用float可以控制向左还是向右浮动
float:left/right;
- 如果一个元素浮动了,那么后面的元素同时也会受到影响,要消除这种影响,就需要清除浮动。
#可以清除左右两边或者单边的浮动
clear:both/left/right/none;
#浮动应用之ul菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
float: left;
margin-left: 30px;
/* clear: both; */
}
a {
font: 30px 楷体;
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<ul type="none">
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">拍卖</a></li>
</ul>
</body>
</html>