1.float

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>float</title>

     <style>

         body{

             border-style:solid;

             border-size:3px;

         }

         .div1{

             width:100px;

             height:100px;

             background-color:red;

             float:left;

         }

         .div2{

             width:100px;

             height:100px;

             background-color:green;

             float:left;

         }

         .div3{

             width:200px;

             height:200px;

             background-color:gray;

         }

     </style>

 </head>

 <body>

 <!

     目的：如何在一行显示多个div元素

 --正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流

     脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局

 float：浮动,最好用float，如果有文本，会被挤出去。对于文本来说是不完全文档流

 position:absolute fixed定位（完全脱离）

 -->

 <div class="div1"></div>

 <div class="div2"></div>

 <div class="div3"></div>

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>clear</title>

     <style>

         .div1{

             width:100px;

             height:100px;

             background-color:red;

             float:left;

         }

         .div2{

             width:100px;

             height:100px;

             background-color:green;

             float:left;

         }

         .div3{

             width:200px;

             height:200px;

             background-color:gray;

             clear:both;

         }

     </style>

 </head>

 <body>

 <!--clear就是清除float元素，可以设置左右两边不能有浮动元素-->

     <div class="div1"></div>

     <div class="div2"></div>

     <div class="div3"></div>

 </body>

 </html>

2.position

　　fixed
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>position</title>

     <style>

         .div1{

             height:1500px;

             background-color:green;

         }

         .div2{

             height:1500px;

             background-color:yellow;

         }

         a{

             position:fixed;

             bottom:20px;

             right:20px;

         }

     </style>

 </head>

 <body>

     <div class="div1"></div>

     <div class="div2"></div>

     <!--position:absolute fixed 定位（完全）-->

     <a >返回顶部</a>

 </body>

 </html>

css中的float和position的更多相关文章

  1. [转][译]关于CSS中的float和position和z-index

    原文:http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

  2. [译] 关于CSS中的float和position

    原文 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取 ...

  3. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  4. 关于CSS中的float可能出现的小问题

    关于CSS中的float可能出现的小问题 前言:最近学习CSS的float所遇到点小问题,然后顺便分享给大家. 一.什么是CSS以及float (一) CSS概述 CSS是层叠样式表(英文全称:Cas ...

  5. 如何理解css中的float

    最近一段时间一直在为一个即将上线的新站进行一些前端开发.自然,对CSS的使用是必不可少的了.我们在CSS 中很多时候会用到浮动来布局.常见的有 float:left 或者 float:right .简 ...

  6. CSS中盒子模型和position（一）

    今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...

  7. css 中 的 float :left 和 clear :both

    float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性.并且FLOAT必需应用在块级元素之上,也就是说浮动并不应用于内联标签.或者换句话来说当应用了FLOAT那么这个元素 ...

  8. css中的float属性以及清除方法 (2011-09-03 17:36:26)

    CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div ...

  9. CSS中常见的位置(position)属性

    常用的位置属性列表: position(top.bottom.left.right) .overflow.z-index position用法: 值 描述 relative 相对定位,原位置仍占用空间 ...

随机推荐

  1. UVa10791 - Minimum Sum LCM

    分析即为紫薯上的分析. 难点是发现当每个aipi作为一个单独的整数时才最优.. 答案就是将所有不同的 相同因子的积 相加即可 代码: #include<cstdio> #include&l ...

  2. 从canvas理解面向对象

    前言 据说在编程语言的发展过程中,面向对象语言的出现是为了解决GUI编程的问题而出现的.计算机一开始是用纸带,命令行等来和人进行交互,而图形界面的出现是一次重大的改进,使普通人很容易就能使用计算机. ...

  3. phalcon——调度控制器

    将侦听者绑定到组件上: use Phalcon\Mvc\Dispatcher as MvcDispatcher, Phalcon\Events\Manager as EventsManager; $d ...

  4. phalcon——Paginator分页

    phalcon使用的分页器是Phalcon\Paginator. 首先先展示一个比较完整的使用例子: 控制器代码: use Phalcon\Paginator\Adapter\Model as Pag ...

  5. Java中的类变量、实例变量、类方法、实例方法的区别

    类变量:形如static int a; 顾名思义,类变量可以理解为类的变量,类变量在类加载的时候就已经给它分配了内存空间,不同于实例变量(int a; ),实例变量是在该类创建对象的时候分配内存的.并 ...

  6. R语言高性能编程，优化（一）

    这段时间学习了<R高性能编程>这本书,基于这段时间做的项目实践,总结了一些自己的体会,和大家分享 一.为什么R程序有时候会很慢?1.计算性能的三个限制条件 cpu ram io R代码本身 ...

  7. Linux系列教程（十二）——Linux软件包管理之yum在线管理

    上一篇博客我们介绍了rpm包管理之rpm命令管理,我们发现在使用rpm命令手动安装rpm包的时候,会发现安装遇到到的依赖让你痛不欲生,安装一个rpm时会要先先安装某个依赖的rpm,而安装这个依赖的rp ...

  8. 判断回文数字 9. Palindrome Number

    Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...

  9. addEventListener 的事件函数的传递【转载】

    addEventListener 参数如下: addEventListener(type, listener[, useCapture]); type,事件名称 listener,事件处理器 useC ...

  10. 【WEB API项目实战干货系列】- WEB API入门(一)

    这篇做为这个系列的第一篇,做基本的介绍,有经验的人可以直接跳到第二部分创建 ProductController.   创建 Web API 项目 在这里我们使用VS2013, .NET 4.5.1创建 ...