案例一：

1. 首先是01.html文件：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <link rel="stylesheet" type="text/css" href="01.css" />
  7. </head>
  8.  
  9. <body>
  10. <div class="div1">
  11.   <div class="div2 special_div">1div</div>
  12.   <div class="div2">2div</div>
  13.   <div class="div2">3div</div>
  14.   <div class="div2">4div</div>
  15.   <div class="div2">5div</div>
  16.   <div class="div2">6div</div>
  17. </div>
  18. </body>
  19. </html>

2. 然后01.css文件：

  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. .div1 {
  5.     width:800px;
  6.     height:800px;
  7.     border: 1px solid pink;
  8. }
  9.  
  10. .div2 {
  11.     width:150px;
  12.     height:100px;
  13.     border:1px solid blue;
  14.     background-color:pink;
  15.     margin-top:5px;
  16.     margin-left:5px;
  17.     text-align: center;
  18.     float:left;/*左浮动：指让该元素尽量向左边移动，让出自己右边的空间，给下一个元素*/
  19. }
  20.  
  21. .special_div {
  22.     height:120px;
  23. }

效果图：

总结：

浮动是一个重要的概念，分为左浮动、右浮动和清除浮动。

特别注意：如果一行宽度不够排下所有的div，则会自动换行;当然如果有某个div过大，则会卡住别的div，如上图会后移

案例二：

1.首先是01.html文件：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <link rel="stylesheet" type="text/css" href="01.css" />
  7. </head>
  8.  
  9. <body>
  10. <div class="div1">
  11. <div id="div3" class="div2">1div</div>
  12. <div class="div2">2div</div>
  13. <div class="div2">3div</div>
  14. </div>
  15. </body>
  16. </html>

2.然后是01.css文件：

  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. .div1 {
  5.     width:800px;
  6.     height:800px;
  7.     border: 1px solid pink;
  8. }
  9.  
  10. .div2 {
  11.     width:150px;
  12.     height:100px;
  13.     border:1px solid blue;
  14.     background-color:pink;
  15.     margin-top:5px;
  16.     margin-left:5px;
  17.  
  18.     text-align: center;
  19. }
  20.  
  21. #div3 {
  22.     float:right;/*右浮动：让该元素尽量向右移动，直到碰到他的父元素的右边界*/
  23. }

效果图：

css笔记19：浮动的案例的更多相关文章

  1. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  2. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  3. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  4. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  5. CSS盒子的浮动

    web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...

  6. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  7. 写给后端的前端笔记：浮动（float）布局

    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...

  8. JAVA自学笔记19

    JAVA自学笔记19 1.集合总结 Collection(单列集合) List(有序可重复) ArrayList:底层数据结构是数组 ,查询快,增删慢.线程不安全,效率高 Vector:底层数据结构是 ...

  9. CSS基础知识---浮动，定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

随机推荐

  1. [Hive - LanguageManual ] Windowing and Analytics Functions （待）

    LanguageManual WindowingAndAnalytics     Skip to end of metadata   Added by Lefty Leverenz, last edi ...

  2. 【转】Objective-C代码注释和文档输出的工具和方法

    http://blog.xcodev.com/blog/2013/11/01/code-comment-and-doc-gen-tools-for-objc/ 代码注释可以让代码更容易接受和使用,特别 ...

  3. 玩转轻巧型C/C++ IDE之C-Free（配置GCC、Visual C++、Borland C++编译器）

    玩转轻巧型C/C++ IDE之C-Free(配置GCC.Visual C++.Borland C++编译器) 之前在写一点简单的C/C++代码时习惯了VC++6.0,但是由于在windows7下VC6 ...

  4. POJ 2481 Cows (数组数组求逆序对)

    题目链接:http://poj.org/problem?id=2481 给你n个区间,让你求每个区间被真包含的区间个数有多少,注意是真包含,所以要是两个区间的x y都相同就算0.(类似poj3067, ...

  5. SimpleUrlHandlerMapping用法

    SimpleUrlHandlerMapping是Spring MVC中适用性最强的Handler Mapping类,允许明确指定URL模式和Handler的映射关系.有两种方式声明SimpleUrlH ...

  6. Servlet 总结

    1,什么是Servlet2,Servlet有什么作用3,Servlet的生命周期4,Servlet怎么处理一个请求5,Servlet与JSP有什么区别6,Servlet里的cookie技术7,Serv ...

  7. C#获取当前应用程序所在路径及环境变量

    一.获取当前文件的路径 string str1=Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string st ...

  8. Bootstrap排版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  9. sqlite3 多线程和锁 ，优化插入速度及性能优化

    一. 是否支持多线程?   SQLite官网上的"Is SQLite threadsafe?"这个问答. 简单来说,从3.3.1版本开始,它就是线程安全的了.而iOS的SQLite ...

  10. ThinkPad指纹验证在win7无法使用的解决方法

    原先本本装window7 64bit 专业版(正版),但用着用着觉得 很不爽 ,反应特慢.所以决定对本本来次大换血,换成windows server 2008 R2.最后在装指纹验证的时候,使用超级管 ...