一.文字环绕效果：

html代码如下：

 1 <body>

 2

 3      <style type="text/css">

 4        #big img {float: left;padding: 10px;border: 1px solid red;}

 5        #big span {font-size: 24px;font-weight: bold; margin: 0 auto;}

 6      </style>

 7      <div id="big">

 8         <span>广告浮动效果:</span>

 9          <p><img src="..\Desktop\p6.jpg" width="200" alt="p6" />文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>

10      </div>

11

12   </body>

解释：把img标签 直接左浮动，就会出现文字包围图片的效果，而padding: 10px;的作用是设置图片与文字的距离，运行效果如下（记得自己修改图片路径）：

二.多个div并排显示

html代码如下：

 1 <body>

 2

 3      <style type="text/css">

 4         #big div {width: 100px;height: 100px;}

 5         .div1 {background: red;}

 6         .div2 {background: yellow;}

 7         .div3 {background: green;}

 8      </style>

 9      <div id="big">

10         <div class="div1">div1</div>

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

12         <div class="div3">div3</div>

13      </div>

14

15   </body>

上面的代码显示效果如下：

由图看出三个div并没有并排显示，而是竖着显示的，这就是默认的显示方法。而如果想要并排显示的话，只需要在上上面的代码中加一句话，

#big div {width: 100px;height: 100px;float：left;}然后显示效果如下：

三.清除浮动

有下面的这段html代码：

 1  <body>

 2

 3      <style type="text/css">

 4         #big div {width: 100px;height: 100px;}

 5         .div1 {background: red;float: left;}//注意这里的第一个div是左浮动；

 6         .div2 {background: yellow;}

 7         .div3 {background: green;}

 8      </style>

 9      <div id="big">

10         <div class="div1">div1</div>

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

12         <div class="div3">div3</div>

13      </div>

14

15   </body>

从第二个例子可以得知，如果div2和div3都设置了float：left；三个div就会并排显示。注意上面的代码，第一个div是左浮动，而后面两个却没有设置浮动，运行效果怎么样呢？如下图：

由图可以看出，div2不见了，这是为什么呢？因为div1设置为左浮动，所以div2会默认为从第一个显示，所以div1就覆盖了div2，div3从div2处继续显示，所以造成了这样一个结果，那么该怎么去还原默认显示呢？这就要用到清除浮动，修改代码  .div2 {background: yellow;clear：left;}就ok了。效果如下：

div2又出现了，这就是清除浮动的作用，clear属性有三种值：left、right、both；顾名思义，就知道什么意思了，我不多说了。

三个例子就到这儿吧，希望对大家有帮助。有问题欢迎讨论。

（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）的更多相关文章

  1. CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法

    2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...

  2. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  3. 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  4. CSS(中)篇

    1.1行高 行高属于文字的属性 行高=文字大小+上间距+下间距(默认行高=18px) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...

  5. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

  6. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

  7. CSS中一些重要概念

    在CSS的最后一个博客中,将学习整理一些CSS中的重要概念,对这些重要概念的掌握,将对CSS的认识十分重要. 了解这些概念对深入理解CSS的本质十分重要:(1)包含块containing block ...

  8. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  9. 区分html与css中的属性

    CSS中id与Class的区别 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次:class可以多次引用. 3.I ...

随机推荐

  1. PYTHON简介及安装

    Python简介 Python是一种广泛使用的高层次,通用,解释,动态编程语言.它的设计理念强调代码的可读性,它的语法允许程序员表达更少的代码的概念比将在可能语言如C ++或Java.该语言提供旨在使 ...

  2. 从Lumia退役看为什么WP走向没落（从程序员与市场开发的角度，讲的真棒！）

    http://www.cnblogs.com/zhangkai2237/p/4856880.html

  3. Visio 下载，及密钥

    Visio2010简体中文高级版(永久激活密钥:GR24B-GC2XY-KRXRG-2TRJJ-4X7DC) ed2k://|file|cn_visio_2010_x64_516562.exe|515 ...

  4. bzoj 1191

    http://www.lydsy.com/JudgeOnline/problem.php?id=1191 二分+二分图匹配. 首先二分可以答对前mid道题,然后做二分图. 左边是题目,右边是锦囊. 做 ...

  5. 专注于HTTP的高性能高易用性网络库：Fslib.network库

    博客列表页:http://blog.fishlee.net/tag/fslib-network/ 原创FSLib.Network库(目前专注于HTTP的高性能高易用性网络库) FSLib.Networ ...

  6. struct2（四）编写Struct2 的Action

    简介: 1.映射一个Action到一个类上面 2.把结果返回到view展示 3.编写Action对应的控制逻辑   1. Action Mapping <action name="he ...

  7. n%i之和

    题目:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1168 题意:给定一个n,注意这里n小于10^12,求 分析:早些时 ...

  8. 常用的js对象扩展方法

    1. 字符串的replaceAll String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { if (!R ...

  9. python高级编程：有用的设计模式3

    # -*- coding: utf-8 -*-__author__ = 'Administrator'#python高级编程:有用的设计模式#访问者:有助于将算法从数据结构中分离出来"&qu ...

  10. [原创作品] RequireJs入门进阶教程

    最近我发现RSS采集数据是个很好玩的东西,就是可以直接把别人的数据放在自己的网站上.如果网友们在其他地方发现这篇文章,还是来博客园看吧(http://zhutty.cnblogs.com).这样代码比 ...