CSS定位与浮动详解-优快云博客

本文链接：https://blog.youkuaiyun.com/coderling/article/details/8664737

参考资料：http://www.w3school.com.cn/css/css_positioning.asp

div/css中的定位——position 分为三种：相对定位，绝对定位，浮动。

1、相对定位：设置了相对定位的元素，它依然在文档流中占有它本来的位置。

2、绝对定位：设置了绝对定位的元素会从文档流中脱离出来，默认的位置是它本来在文档流的位置，但并不会占用文档流的空间。其定位是相对于最近的已设置定位（设置了定位属性）的祖先元素。

3.浮动（float）：浮动使块级元素向左或向右移动直到碰到了包含他的元素的边框或者碰到另一个浮动元素的边框为止。只有块级元素才具有float属性，对于不是块级元素的元素可以用disply：block;来设置。同样浮动元素也不属于文档流。

其实还是挺好理解的，不过应用起来，由于还要与其他属性组合起来，就显得有点繁琐。用float学做了个菜单，好像float经常用来结合ul来做导航菜单。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
     a {
	    text-decoration:none;
		color:#FFF;
	 }
     ul li{
	    float:left;
		background-color:#B10000;
		color:#FFF;
		list-style:none outside none;
		border:1px solid #333;
		text-align:center;
		padding:3px 5px;
	 }
  </style>
 </head>

 <body>
   <ul>
       <li><a href = "#">菜单一</a></li>
	   <li><a href = "#">菜单二</a></li>
	   <li><a href = "#">菜单三</a></li>
	   <li><a href = "#">菜单四</a></li>
	   <li><a href = "#">菜单五</a></li>
	   <li><a href = "#">菜单六</a></li>
   </ul>
 </body>
</html>

真正的定位布局有很多繁琐的细节，做起来还真的挺烦的，不过做出来后感觉棒极了！