一 综述： float position 对于div布局的作用明显, 注意使用的细节也变得有必要了.  float position 有相同的地方,都会脱离"文档流"(position中绝对定位),游离在"平面空间" 一旦使用不当会导致布局错乱和一些不好处理的bug;

二 float细节：

    先看"原始代码":

     

<head>

  <style type="text/css">

  *{margin:0px; padding:0px;}

  .top{

  width:100%; height:30px;

  background:#000;

  }

  a{

  font-size:14px;font-family:"微软雅黑";font-family:"微软雅黑";

  text-decoration:none;

  }

  ul li{

  list-style:none;

  float:left;  /*行向列表*/

  }

  /*.nav{

   height:15px;

   float:left;

  }

  .user{

  height:15px;

  float:left;

  }*/

  </style>

 </head>

 <body>

    <div class="top">

        <ul class="nav">

        　　<li><a href="#">java</a></li>

        　　<li><a href="#">SEO</a></li>

        　　<li><a href="#">php</a></li>

        　　<li><a href="#">c++</a></li>

        </ul>

        <ul class="user">

        　　<li><a href="#">登陆</a></li>

        　　li><a href="#">注册</a></li>

        </ul>

    </div>

 </body>

</html>

这里为了好看只写主要代码.使用"谷歌"浏览器运行结果如下;这里可以看到运行结果是我们想要的;下面的演示以这部分代码为基准;

   下面做如下操作:(1)将.top里面的height去除; (2)加上其他样式;看代码

 <head>

  .top{

  width:100%;

  background:#000;

  }

  a{

  font-size:14px;font-family:"微软雅黑";font-family:"微软雅黑";

  text-decoration:none; /*去除文本修饰*/

  }

  ul li{

  list-style:none;

  float:left;  /*行向列表*/

  }

  .nav{

   height:15px;

   }

  .user{

  height:15px;

  }*/

  </style>

 </head>

 <body>

   <div class="top">

        <ul class="nav">

       　　 <li><a href="#">java</a></li>

       　　 <li><a href="#">SEO</a></li>

        　　<li><a href="#">php</a></li>

        　　<li><a href="#">c++</a></li>

        </ul>

        <ul class="user">

        　　<li><a href="#">登陆</a></li>

        　　<li><a href="#">注册</a></li>

        </ul>

        <!--<div style="clear:both;"></div>

        清除float;

        -->

    </div>

 </body>

</html>

结果如下:我们看到即使没有给.top height属性值,也一样可以显示背景色(黑色), 我们知道假如一个盒子不给 height属性,颜色解析我们是看不到的; 这里可以看到是因为top盒子的height是由nav user盒子的height撑开的;可以试试将nav user的height去除,那么什么都看不见;

将nav user 改成.nav{height:15px; float:left;} .user{height:15px; float:left;} 会怎么样? 看面1(图我放小了) 原因:是因为float会使"使用float"的标签脱离文档流,进入平面空间;此时.top是不会被撑开(子类标签不在同一流里面),top盒子 height解释为0px;自然就看不到; 你可以在.top里面加上 border:2px solid red;那你会看到下面图2

上面的红色区块就是.top;你再加上height:30px;那么结果就是我们想要的(背景有了);

所以得出结论：

(1)假如盒子里面的width height其中一个为0px;那么里面的样式解析会看不到;

建议：不要只是用"内容"将盒子撑开,最好为盒子设置width height属性;

(2)float的使用会脱离文档流,使用时要注意; "万不得已"再使用; 容易导致bug(布局错乱);有的可以使用定位position和display:inline-block;来处理;

三:定位--position

1,绝对定位:绝对定位和float一样,是会脱离文档流的. 假如当前位置有其他元素,那么会导致覆盖; 绝对定位最重要的是关注二点:(1)脱离文档流;(2)参考对象;  什么是参考对象呢? 看下面基准代码？

<head>

 <style type="text/css">

    
  .one{width:200px;height:200px;

  background:#000;

  }

 .two{

 width:100px;

 height:100px;

 background:yellow;

 border:2px solid green;

 }

 </style>

</head>

<body>


 <div class="one">

 <div class="two">

 </div>

 </div>

</body>

运行

:

two盒子在one盒子里面,也就是说one盒子是two盒子的父元素;我们给two加上绝对定位.two{position:absolute;}

此时two盒子的"参考对象"就是body本身; 那是不是什么时候都是以body为"参考对象"呢? 当然不是; 我们为one盒子加上.one{position:relative;} 那么就参考".one"

得出结论:元素进行绝对定位时以"最近的有设置定位的父类元素为参考对象'";这句话的意思是:假如元素的直接父元素和间接父元素都有设置定位,那么"就近为原则",假如父类都没有设置position, 那么就参照body了(其实body也是"父类");

*** 在基准代码上加 .two{position:absolute; top:10px;right:10px;}.one{

position:relative;}

运行：运行结果很好的验证了上面结论的正确性;

2 相对定位

也要注意二点：(1)相对定位不会脱离文档流;(2)相对定位是相对那个"对象"定位呢? 其实这个对象就是"自己".

对的,就是参照自己(元素本身);

***来一个有意思的:基准代码中我们加上 .two{position:reative; top:10px; left:10px;} 运行结果和上图是一样的;也就是说top:10px;的意思是相对于原来的位置:向下10px; left：10px;就是相对原来的位置向右10px; 这样好像不好理解.

简单粗暴：

原来位置的上边界在当前位置上边界的上面10px处.

左边的也一样：原来位置的左边界在当前位置的左边10px处;

绝对定位和相对定位都可以这样理解;

例1:你想把元素向右移10px; 你可以会这样做： right:10px; 这样是错的, 应该是left:10px;或者right：-10px;你照着上面结论就理解了(逻辑问题)。

float-position的一些细节的更多相关文章

  1. 【20】display,float,position的关系

    [20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...

  2. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. float position的測试案例

    依据<a target=_blank href="http://blog.csdn.net/goodshot/article/details/44348525">htt ...

  4. 常用的flex知识 ,比起float position 好用不少

      flex布局具有便捷.灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结. web页面布局(topbar + main + footbar) 示例代码   要 ...

  5. 盒模型、position、float详解css重点汇总

    元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一 ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. 细说一下position（定位），以及其他的小知识

    细说:position      位置 1.只要使用定位,必须要有一个相对的参照物.relative 2.具体定位的那个1元素需要加position:absolute:绝对的 绝对的:就是具体到某一个 ...

  8. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  9. [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

    讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?  列出display的值,说明他们的作用.position的值, relative和absolu ...

随机推荐

  1. 使用python的Flask实现一个RESTful API服务器端[翻译]

    最近这些年,REST已经成为web services和APIs的标准架构,很多APP的架构基本上是使用RESTful的形式了. 本文将会使用python的Flask框架轻松实现一个RESTful的服务 ...

  2. RHEL6.3系统安装

      进入安装界面   这里选择跳过   点击下一步   选择安装语言     选择键盘   选择系统储存方式   选择是否格式化储存设备     给安装的系统一个计算机名     选择时区   给ro ...

  3. protobuf学习(2)-相关学习资料

    protobuf官方git地址 protobuf官方英文文档   (你懂的需要FQ) protobuf中文翻译文档 protobuf概述          (官方翻译 推荐阅读) protobuf入门 ...

  4. 收集几个不错的最新win10系统64位和32位系统Ghost版下载

    系统来自转载:系统妈 ◆ 版本特点 该版本安装后可利用微软公开的Windows10 KMS密钥激活,且右小角无版本水印. KMS客户端密钥:NPPR9-FWDCX-D2C8J-H872K-2YT43, ...

  5. Microsoft SQL Server 2008 R2 安装卸载

    问题 问题1 标题: Microsoft SQL Server 2008 R2 安装程序 ------------------------------ 出现以下错误: Could not open k ...

  6. chrome防止自动填充密码

    是防止,不是禁止.禁止需要在浏览器设置. chrome浏览器保存密码之后,页面上有password存在的时候会出现自动填充用户名和密码的情况. 添加disableautocomplete和autoco ...

  7. 基于英特尔® 至强 E5 系列处理器的单节点 Caffe 评分和训练

    原文链接 在互联网搜索引擎和医疗成像等诸多领域,深度神经网络 (DNN) 应用的重要性正在不断提升. Pradeep Dubey 在其博文中概述了英特尔® 架构机器学习愿景. 英特尔正在实现 Prad ...

  8. [转]How do you create a custom AuthorizeAttribute in ASP.NET Core?

    问: I'm trying to make a custom authorization attribute in ASP.NET Core. In previous versions it was ...

  9. cg数据类型

    Cg 支持7 种基本的数据类型:1. float,32 位浮点数据,一个符号位.浮点数据类型被所有的profile 支持(但是DirectX8 pixel profiles 在一些操作中降低了浮点数的 ...

  10. shiro-简介

    简介: Apache Shiro 是Java的一个安全(权限)框架. Shiro可以非常容易的开发出足够好的应用,其不仅可以用在JavaSE环境,也可以用在JavaEE环境. Shiro可以完成:认证 ...