1.float

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>float</title>
  6.  
  7.      <style>
  8.          body{
  9.              border-style:solid;
  10.              border-size:3px;
  11.          }
  12.          .div1{
  13.              width:100px;
  14.              height:100px;
  15.              background-color:red;
  16.              float:left;
  17.          }
  18.          .div2{
  19.              width:100px;
  20.              height:100px;
  21.              background-color:green;
  22.              float:left;
  23.          }
  24.          .div3{
  25.              width:200px;
  26.              height:200px;
  27.              background-color:gray;
  28.          }
  29.      </style>
  30.  </head>
  31.  <body>
  32.  <!
  33.      目的：如何在一行显示多个div元素
  34.  --正常文档流：将元素（标签）在进行排版布局的时候按着 从上到下 从左到右的顺序排版的一个布局流
  35.      脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局
  36.  float：浮动,最好用float，如果有文本，会被挤出去。对于文本来说是不完全文档流
  37.  position:absolute fixed定位（完全脱离）
  38.  -->
  39.  <div class="div1"></div>
  40.  <div class="div2"></div>
  41.  <div class="div3"></div>
  42.  </body>
  43.  </html>
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>clear</title>
  6.  
  7.      <style>
  8.          .div1{
  9.              width:100px;
  10.              height:100px;
  11.              background-color:red;
  12.              float:left;
  13.          }
  14.          .div2{
  15.              width:100px;
  16.              height:100px;
  17.              background-color:green;
  18.              float:left;
  19.          }
  20.          .div3{
  21.              width:200px;
  22.              height:200px;
  23.              background-color:gray;
  24.              clear:both;
  25.          }
  26.      </style>
  27.  </head>
  28.  <body>
  29.  <!--clear就是清除float元素，可以设置左右两边不能有浮动元素-->
  30.      <div class="div1"></div>
  31.      <div class="div2"></div>
  32.      <div class="div3"></div>
  33.  </body>
  34.  </html>

2.position

　　fixed
  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>position</title>
  6.  
  7.      <style>
  8.          .div1{
  9.              height:1500px;
  10.              background-color:green;
  11.          }
  12.          .div2{
  13.              height:1500px;
  14.              background-color:yellow;
  15.          }
  16.          a{
  17.              position:fixed;
  18.              bottom:20px;
  19.              right:20px;
  20.          }
  21.      </style>
  22.  </head>
  23.  <body>
  24.      <div class="div1"></div>
  25.      <div class="div2"></div>
  26.      <!--position:absolute fixed 定位（完全）-->
  27.      <a >返回顶部</a>
  28.  </body>
  29.  </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. LINUX 笔记-scp命令

    从本地服务器复制到远程服务器: (1) 复制文件: 命令格式: scp local_file remote_username@remote_ip:remote_folder (2) 复制目录: 命令格 ...

  2. C++继承(07)

    继承 通过特殊化已有的类来建立新类的过程,叫做“类的派生”,原来的类叫做“基类”,新建立的类则叫做“派生类”.另一方面,从类的成员角度看,派生类自动地将基类的所有成员作为自己的成员,这叫做“继承”.基 ...

  3. NotePad++ 正则表达式替换 高级用法 [转]

    转自:http://blog.csdn.net/gdp12315_gu/article/details/51730584 在我们处理文件时,很多时候会用到查找与替换.当我们想将文件中某一部分替换替换文 ...

  4. 用户关注微信公众号后，获取该用户的openID存数据库失败

    关注微信公众号后将关注人的openID存入数据库失败,而openID换成字符串写死却可以存入数据库: $wxid=$postObj->FromUserName; $data['wx_openid ...

  5. 本表触发更新modifytime,跨表更新modifytime 触发器

    一.每行有改动,则触发更新modifytime SQL> create table test(id int, name varchar(10), crdate date, udate date) ...

  6. C语言学习（记录）【内存相关_1:内存基础】

    本学习是基于嵌入式的C语言学习记录(课程内容来源于某位老师的网络课程,为了证明不是在打广告,就不写出老师的名字了,感谢.) -------------------------------------- ...

  7. Vue源码学习02 初始化模块init.js

    接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是 ...

  8. Android模拟器调试html5 app

    主机:Linux x641.Android模拟器,模拟器设置--->打开Enable Usb Debug2.在主机上安装firefox,最低v36.菜单--->开发者--->WebI ...

  9. Best MVC Practices(最优的MVC布局)

    Best MVC Practices 最优的MVC布局策略 Model View Controller 1.数据层 2.视图层 3.控制器层 Although Model-View-Controlle ...

  10. Linux学习（十七）压缩与打包

    一.关于打包和压缩 打包和压缩的最大意义在于减少文件传输中需要的流量.打包的方式大概有tar命令,zip命令.压缩的方式有gzip,bzip2,xz.tar命令可以通过参数将压缩和打包在一起执行. 二 ...