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. 各大公司Java后端开发面试题总结

    ThreadLocal(线程变量副本)Synchronized实现内存共享,ThreadLocal为每个线程维护一个本地变量.采用空间换时间,它用于线程间的数据隔离,为每一个使用该变量的线程提供一个副 ...

  2. HTTPS和HTTP有什么区别？如何将HTTP转化成HTTPS

    不知道大家有没有注意到输入网址时的HTTP部分,在打开网站进行操作时有时候会自动跳转为HTTPS格式,这是为什么?HTTP与HTTPS到底有什么区别?如何将HTTP转化成HTTPS,针对这些问题,我们 ...

  3. LINUX 笔记-top命令

    top命令经常用来监控linux的系统状况,比如cpu.内存的使用. top - :: up day, :, users, load average: 0.00, 0.01, 0.00 Tasks: ...

  4. APUE 4 - 线程<2> : 线程同步

    当控件的多个线程共享统一内存时,我们需要确定各个线程访问到的数据的一致性.在cpu结构中,修改操作由多个内存读写周期(memory cycle),而在这些内存周期之间, 有可能会发生其他线程的内存读操 ...

  5. SpringMVC 集成redis

    一.下载导入jar 二.配置redis 1.创建redis.properties # Redis settings #redis.host=192.168.20.101 #redis.port= #r ...

  6. LeetCode 628. Maximum Product of Three Numbers （最大三数乘积）

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  7. LeetCode 73. Set Matrix Zeros（矩阵赋零）

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. click ...

  8. Tomcat 服务器及使用Eclipse绑定Tomcat并发布应用

    一.简介 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开发而成 ...

  9. 【机器学习实战】第 10 章 K-Means（K-均值）聚类算法

    第 10 章 K-Means(K-均值)聚类算法 K-Means 算法 聚类是一种无监督的学习, 它将相似的对象归到一个簇中, 将不相似对象归到不同簇中.相似这一概念取决于所选择的相似度计算方法.K- ...

  10. EF框架搭建小总结--CodeFirst模型优先

    前言:之前在下总结编写了一篇 EF框架搭建小总结--ModelFirst模型优先 博文,看到一段时间内该博文的访问量蹭.蹭蹭.蹭蹭蹭...往上涨(实际也不是很多,嘿嘿),但是还是按捺不住内心的喜悦(蛮 ...