（转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）
一.文字环绕效果：
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.清除浮动（默认显示）的更多相关文章
- CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法
2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）
本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...
- CSS(中)篇
1.1行高 行高属于文字的属性 行高=文字大小+上间距+下间距(默认行高=18px) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
- 文字环绕和两栏自适应以及区域滚动插件iscroll.js
一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...
- CSS中一些重要概念
在CSS的最后一个博客中,将学习整理一些CSS中的重要概念,对这些重要概念的掌握,将对CSS的认识十分重要. 了解这些概念对深入理解CSS的本质十分重要:(1)包含块containing block ...
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- 区分html与css中的属性
CSS中id与Class的区别 1.在CSS文件里书写时,ID加前缀"#":CLASS用"." 2.id一个页面只可以使用一次:class可以多次引用. 3.I ...
随机推荐
- Python新手学习基础之循环语句——While循环
while循环 上一节的条件语句实际上只能执行一次,如果要反复的判断执行一些事件要怎么办? 这个时候就需要靠while.for等循环语句了. 我们先来认识下while循环,何为while循环?就是在某 ...
- apscheduler的使用
最近一个程序要用到后台定时任务,看了看python后台任务,一般2个选择,一个是apscheduler,一个celery.apscheduler比较直观简单一点,就选说说这个库吧.网上一搜索,晕死,好 ...
- Java并发编程--同步容器
BlockingQueue 阻塞队列 对于阻塞队列,如果BlockingQueue是空的,从BlockingQueue取东西的操作将会被阻断进入等待状态,直到BlockingQueue进了东西才会被唤 ...
- iOS中设置导航栏标题的字体颜色和大小
iOS中设置导航栏标题的字体颜色和大小,有需要的朋友可以参考下. 在平时开发项目的时候,难免会遇到修改导航栏字体大小和颜色的需求,一般使用自定义视图的方法,其实还存在一种方法. 方法一:(自定义视图的 ...
- documentElement vs body
document.documentElement与document.body. 2011-03-12 10:15:46| 分类: javascript|字号 订阅 这是DOMDocument ...
- Qt调用VC++生成的动态链接库
Qt如何调用VC++生成的动态链接库?假设当前有VC++编译器生成的动态库文件testdll.h,testdll.lib和testdll.dll. testdll.h文件源码如下: #ifdef TE ...
- 解决MVC项目中，静态html 未找到时候，404的跳转
using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using ...
- BZOJ2697: 特技飞行
2697: 特技飞行 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 607 Solved: 363[Submit][Status] Descript ...
- BZOJ1635: [Usaco2007 Jan]Tallest Cow 最高的牛
1635: [Usaco2007 Jan]Tallest Cow 最高的牛 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 346 Solved: 184 ...
- LIBRARY_PATH和LD_LIBRARY_PATH环境变量的区别
LIBRARY_PATH和LD_LIBRARY_PATH是Linux下的两个环境变量,二者的含义和作用分别如下: LIBRARY_PATH环境变量用于在程序编译期间查找动态链接库时指定查找共享库的路径 ...