案例一：

1. 首先是01.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="01.css" />

</head>

<body>

<div class="div1">

  <div class="div2 special_div">1div</div>

  <div class="div2">2div</div>

  <div class="div2">3div</div>

  <div class="div2">4div</div>

  <div class="div2">5div</div>

  <div class="div2">6div</div>

</div>

</body>

</html>

2. 然后01.css文件：

@charset "utf-8";

/* CSS Document */

.div1 {

    width:800px;

    height:800px;

    border: 1px solid pink;

}

.div2 {

    width:150px;

    height:100px;

    border:1px solid blue;

    background-color:pink;

    margin-top:5px;

    margin-left:5px;

    text-align: center;

    float:left;/*左浮动：指让该元素尽量向左边移动，让出自己右边的空间，给下一个元素*/

}

.special_div {

    height:120px;

}

效果图：

总结：

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

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

案例二：

1.首先是01.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="01.css" />

</head>

<body>

<div class="div1">

<div id="div3" class="div2">1div</div>

<div class="div2">2div</div>

<div class="div2">3div</div>

</div>

</body>

</html>

2.然后是01.css文件：

@charset "utf-8";

/* CSS Document */

.div1 {

    width:800px;

    height:800px;

    border: 1px solid pink;

}

.div2 {

    width:150px;

    height:100px;

    border:1px solid blue;

    background-color:pink;

    margin-top:5px;

    margin-left:5px;

    text-align: center;

}

#div3 {

    float:right;/*右浮动：让该元素尽量向右移动，直到碰到他的父元素的右边界*/

}

效果图：

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. 发布 asp.net网站 到本地IIS

    http://blog.csdn.net/jiben2qingshan/article/details/9249139 概述 网站是由一个个页面组成的,是万维网具体的变现形式,关于万维网,网页的方面的 ...

  2. Linux虚拟机创建后如何进行登录（Windows Azure）

    Linux虚拟机创建后如何进行登录 若要管理虚拟机的设置以及在其上运行的应用程序,可以使用安全外壳 (SSH) 客户端.为此,您必须在计算机上安装要用于访问虚拟机的 SSH 客户端.您可以选择很多 S ...

  3. c语言中register类型的变量

    C语言中: 一.register变量 关键字regiter请求编译器尽可能的将变量存在CPU的寄存器中.有以下几点注意的地方. register变量必须是能被CPU寄存器所接受的类型,这通常意味着re ...

  4. labview多个并行循环同时退出

    labview中停止并行的循环 问题: 在labview中我如何停止两个并行的循环?我使用一个局部变量,但是当我停止程序执行后,第二次不能运行程序.我该如何解决这个问题呢? 解答:  你使用局部变量来 ...

  5. UVa 10900 So you want to be a 2n-aire? （概率DP，数学）

    题意:一 个答题赢奖金的问题,玩家初始的金额为1,给出n,表示有n道题目,t表示说答对一道题目的概率在t到1之间,每次面对一道题,可以选择结束游戏, 获得当 前奖金:回答下一道问题,答对的概率p在t到 ...

  6. Castle IOC容器实践之FactorySupport Facility

    PDF版本下载:http://file.ddvip.com/2008_10/1223538519_ddvip_4853.rar示例代码下载:http://file.ddvip.com/2008_10/ ...

  7. servlet--页面自刷新

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  8. Hadoop 2.4.0全然分布式平台搭建、配置、安装

    一:系统安装与配置 虚拟机软件:Virtualbox 4.3.10(已安装对应扩展包) 虚拟机:Ubuntu 13.04 LTS 32位(至于为什么选择13.04,是由于最新的版本号装上后开机会出现错 ...

  9. Covarience And ContraVariance

    using System; using System.Collections.Generic; using System.IO; namespace CovarientAndContraVarient ...

  10. Servlet---JavaWeb技术的核心基础，JavaWeb框架的基石(二)

    一.Servlet之Request         Web服务器会对收到的每一次客户端http请求分别创建一个用于代表请求的request对象和代表响应的response对象.要获取客户端提交的数据需 ...