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. vue搭建项目前奏曲——vue-cli

    vue-cli是快速构建这个单页应用的脚手架,这个可是官方的.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.Node.js.npm ...

  2. 67、django之模型层（model）--查询补充及mookie

    本篇导航: F查询与Q查询 cookie 一.F查询与Q查询 1.以Book表为例 class Book(models.Model) : title = models.CharField(max_le ...

  3. 批量查询sql脚本

    远程批量查询sql脚本 for i in {1..50} do sql_ip=172.168.0.${i}   information=`mysql -h ${sql_ip} -uroot -ppas ...

  4. .6-Vue源码之AST（2）

    上一节获取到了DOM树的字符串,准备进入compile阶段: // Line-9326 function compileToFunctions(template,options,vm) { // 获取 ...

  5. Rank of Tetris

    Rank of Tetris Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...

  6. 学习笔记TF059:自然语言处理、智能聊天机器人

    自然语言处理,语音处理.文本处理.语音识别(speech recognition),让计算机能够"听懂"人类语音,语音的文字信息"提取". 日本富国生命保险公司 ...

  7. Javascript下IE与Firefox下的差异兼容写法总结

    http://www.jb51.net/article/23923.htm     总结一部分IE和Firefox的javascript差异写法,对于像书写多浏览器兼容性更好的代码,可以参考下.   ...

  8. ⒂bootstrap组件 折叠 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Java_String_01_由转义字符串得到其原本字符串

    在开发企业微信电子发票之拉取电子发票接口的时候,微信服务器会发送给我们一个2层的转义字符串,而我们要想得到我们想要的结果,就需要进行一些处理: 反转义+去除首尾双引号. 一.需求 现有一个字符串 st ...

  10. thinkphp后台ajaxReturn提示下载的问题

    thinkphp新版设置了ajaxreturn方法如果是JSON格式会自动设置头信息为JSON格式,这样做在谷歌下可以正常解析,但是在IE和OPERA浏览器下就会提示下载,从而导致程序出错,修改方法如 ...