（转）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 ...
随机推荐
- contentSize、contentInset和contentOffset区别
contentSize.contentInset和contentOffset区别 分类: iphone开发2011-12-05 21:49 23495人阅读 评论(4) 收藏 举报 uiviewios ...
- Function 语意学
C++支持三种类型的member functions: static.nonstatic和virtual,每一种类型调用方式都不相同. 一 nostatic members functions 1 调 ...
- 在C语言控制台程序中播放MP3音乐
游戏没有声音多单调. 这里做一个简单的范例,用 mciSendString 函数播放 MP3 格式的音乐,先看看代码吧: // 编译该范例前,请把 background.mp3 放在项目文件夹中 // ...
- NGINX当中的SSL配置（PEM启动密码免输入）
干过的都懂,这个东东好像很碍事. 很影响RELOAD的效率...并且,,,好像这个弄了之后,NGINX作RELOAD之后,可以即时更新配置了..(还是说那个DVROOT.CER影响的??未考证) ht ...
- Katana 还是Owin ? 本地自承载
使用Owin 将Web项目脱离 IIS确实很特别..... 由此 ,可以衍生出,一个新的通信渠道,本地Server的自承载. 1 Node.js 2 Python 3 Ruby 4 Owin (C#- ...
- Cmake调用NSIS（一个可执行文件，其实就是一个编译器）编译NSIS脚本问题研究
技术经理说,可以用Cmake当中的add_custom_command,add_custom_target命令来使用. 我初次研究了下,add_custom_command应该用官方文档中说明的第二种 ...
- poj2689：素数筛
题目大意,给定l和u,求区间[l,u]内的素数中,相邻两个差最大和最小的素数其中 u的范围达到了2e9本质上需要找出n以内的所有素数,使用筛法.先保存50000(大于sqrt(2e9))内的所有素数, ...
- Hive 6、Hive DML(Data Manipulation Language)
DML主要是对Hive 表中的数据进行操作的(增 删 改),但是由于Hadoop的特性,所以单条的修改.删除,其性能会非常的低所以不支持进行级操作: 主要说明一下最常用的批量插入数据较为常用的方法: ...
- poj 3744 Scout YYF I (矩阵)
Description YYF -p. Here is the task, given the place of each mine, please calculate the probality t ...
- .NET 面试题（2）
61.Application .Cookie和 Session 两种会话有什么不同? 1.Application 储存在服务端,没有时间限制,服务器关闭即销毁(前提是自己没写销毁方法) 2.Sessi ...