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. UVa1595，Symmetry

    这题居然是1A过的.....最近无比失落的心情顿时愉悦起来~ 将数据全部读入 先用二维数据来存储坐标(先把题做出来再说= =) 题目中的x,y的坐标范围是-1W到1W....在数组下标里是不能用负数保 ...

  2. 【转】C语言中内存分配

    原文:C语言中内存分配 在任何程序设计环境及语言中,内存管理都十分重要.在目前的计算机系统或嵌入式系统中,内存资源仍然是有限的.因此在程序设计中,有效地管理内存资源是程序员首先考虑的问题. 第1节主要 ...

  3. Java反射机制(Reflect)解析

    一.导读 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语言的设计 ...

  4. jstl 处理字符串

    1.引入 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> ...

  5. 聊聊Java中的反射（一）

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 反射reflection主要为了动态操作Java代码,它的主要功能体现在Java提供的refl ...

  6. Swift 之Protocol在cocoa中的使用范例搜集(一)

    protocol Reusable: class { static var reuseIndentifier: String {get} static var nib: UINib? {get} } ...

  7. 小程序组件之picker和range-key的用法

        因为在微信小程序的官网上并没有range-key的例子以及实际用法,所以好多人不知道具体如何使用.然后我在这里对其进行一个简单的实现,并记录一些注意事项. 以下是官网给的说明:   具体的用法 ...

  8. sphinx实时索引和高亮显示

    sphinx实时索引和高亮显示 时间 2014-06-25 14:50:58  linux技术分享 -欧阳博客 原文  http://www.wantlearn.net/825 主题 Sphinx数据 ...

  9. 删除链表中倒数第n个节点

    给定一个链表,删除链表中倒数第n个节点,返回链表的头节点. 样例 给出链表1->2->3->4->5->null和 n = 2. 删除倒数第二个节点之后,这个链表将变成1 ...

  10. 蓝桥杯-算法训练--ALGO-6 安慰奶牛

    问题描述Farmer John变得非常懒,他不想再继续维护供奶牛之间供通行的道路.道路被用来连接N个牧场,牧场被连续地编号为1到N.每一个牧场都是一个奶牛的家.FJ计划除去P条道路中尽可能多的道路,但 ...