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. 跨域资源共享CORS实现

    问题描述: 本地已经实现的restful接口,在地址栏输入url:loaclhost:8080/admins即可得到预期的json字符串,在网页上显示如下: [{"id":1,&q ...

  2. LeetCode 119. Pascal's Triangle II （杨辉三角之二）

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...

  3. Fastify 系列教程四 （求对象、响应对象和插件）

    Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) Fastify ...

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

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

  5. 最详细的浏览器css hack

    注意点: 网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区.!important常常被我们用来更改样式,而不是兼容hack.造成这个误区的原因是IE6在某些情况下不主动 ...

  6. angular内置provider之$compileProvider

    一.方法概览 directive(name, directiveFactory) component(name, options) aHrefSanitizationWhitelist([regexp ...

  7. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  8. 使用chart和echarts制作图表

      前  言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...

  9. SQL Server本地连接不上

    1.打开SQL Server 2014配置管理器 2.启动服务

  10. onload、DOMContentLoaded与性能问题

    onload.DOMContentLoaded与性能问题 onload事件 DomContentLoaded   1.onload事件 onload事件一般在所有的文档内容加载完成后触发,如果网页中图 ...