代码示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>三列布局:左右固定列宽，中间列自适应</title>

     <style>

         .float-left{

             background-color:red;

             float:left;

             width:80px;

             height:50px;

             border:solid 3px black;

             padding-left:80px;

             margin-left:150px;

         }

         .absolute{

             background-color:blue;

             position:absolute;

             width:80px;

             height:50px;

             border:solid 3px black;

             padding-left: 80px;

             margin-left:150px;

         }

         .relative{

             background-color:yellow;

             position:relative;

             width:80px;

             height:50px;

             border:solid 1px black;

             padding-left: 80px;

             margin-left:150px;

             margin-top:2px;

         }

         .fixed{

             background-color:green;

             position:fixed;

             width:50px;

             height:50px;

             border:solid 3px black;

             padding-left: 100px;

             margin-left:55px;

             margin-top: 2px;

         }

         span{

             background-color:#DB9395;

             width:100px;

             height:100px;

             border:solid 1px black;

             padding-left: 100px;

             margin-left:55px;

         }

     </style>

 </head>

 <body>

     <!--span元素的测试-->

     <span>span</span>

     <br><br>

     <!--float的测试-->

     <div style="float:left;background-color:red;">float div 1</div>

     <div class="float-left">float div 2</div>

     <div class="float-left">float div 3</div>

     <div style="background-color:#76D8DD;border-bottom: solid 1px orange;">normal div1</div>

     <div style="background-color:#76D8DD;">normal div2</div>

     <br/><br/><br/><br/><br/><br/><br/>

     <!--absolute的测试-->

     <div style="position:absolute;background-color:blue;">absolute div 1</div>

     <div class="absolute">absolute div 2</div>

     <div class="absolute">absolute div 3</div>

     <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div3</div>

     <div style="background-color:#76D8DD;">normal div4</div>

      <br><br><br><br><br><br>

     <!--relative的测试-->

     <div style="position:relative;background-color:yellow;">relative div 1</div>

     <div class="relative">relative div 2</div>

     <div class="relative">relative div 3</div>

     <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div5</div>

     <div style="background-color:#76D8DD;">normal div6</div>

    <!--fixed的测试-->

     <br>

     <div style="position:fixed;background-color:green;">fixed div 1</div>

     <br><br>

     <div class="fixed">fixed div 2</div>

     <div class="fixed">fixed div 3</div>

     <div style="background-color:#76D8DD;border-bottom:1px solid coral;">normal div7</div>

     <div style="background-color:#76D8DD;">normal div8</div>

 </body>

 </html>

【float】与【position】汇总的更多相关文章

  1. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  2. float和position谁好？

    float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.不过需要注意的是清除浮动是我们可能需要注意的地方.而position ...

  3. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  4. inline元素、inline-block元素在float、position:fixed、position:absolute之后出现的问题

    我们知道内联元素是不能设置宽.高的,但是一旦使其脱离了文档流,就可以了,这是因为它已经变成了块级元素. 例1: <!DOCTYPE html> <html lang="en ...

  5. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  6. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  7. float与position间的区别

    float与position间的区别:    个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...

  8. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

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

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

  10. CSS：布局的三个关键属性：float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

随机推荐

  1. vue props 用法（转载）

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  2. Java基础知识中的注意事项

    设置Java的相关路径,举例: JAVA_HOME  -->   C:\Program Files\Java\jdk1.8.0_191 Path --->   C:\Program Fil ...

  3. MES方向准备

    与WMS系统对接,实现MES系统中原材料入库.采购退货.生产订单.原材料出库.成品入库单.完工报告.成品出库单.成品入库单.成品出库单.标准出货.出货计划等数据与单据作业数据同步. 车间立体仓库.AG ...

  4. PSP（5.4——5.10）以及周记录

    1.PSP 5.4 14:00 17:00 70 110 讨论班 A Y min 5.5 10:00 16:50 125 285 Cordova A Y min 5.6 13:30 15:00 35 ...

  5. Hbase Shell 数据操作说明

    启动.关闭hbase./bin/start-hbase.sh./bin/stop-hbase.sh 查询HBase版本.它的语法如下:hbase(main):010:0> version 建表c ...

  6. js跨域请求jsonp解决方案-最简单的小demo

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  7. C从源码到运行发生了哪些事

    一个C/C++程序从源代码到可执行程序主要经历了四个阶段: ①预处理.包括展开宏.处理#include,#if,#ifdef等指令.删除注释.还有一些其他操作.相关命令:gcc -E或cpp ②编译. ...

  8. mybatis 一对多的注入 指的是连表查询时候 将不同的查询结果以列表存储对象形式 注入进去 多对一指的是 查询多条结果但都是一样的 只需注入一条

    mybatis 一对多的注入 指的是连表查询时候 将不同的查询结果以列表存储对象形式 注入进去 多对一指的是 查询多条结果但都是一样的 只需注入一条

  9. BZOJ1552[Cerc2007]robotic sort&BZOJ3506[Cqoi2014]排序机械臂——非旋转treap

    题目描述 输入 输入共两行,第一行为一个整数N,N表示物品的个数,1<=N<=100000. 第二行为N个用空格隔开的正整数,表示N个物品最初排列的编号. 输出 输出共一行,N个用空格隔开 ...

  10. SQL partition （小组排序）

    很多时候,我们在SQL中进行数据去重(distinct) 结果发现有2条一样ID,或者name的数据,我们想要最接近的那条数据. 直接看看题目: 原表 select ID,Title,PRICE fr ...