（转）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 3.x 官方文档翻译]Whetting Your Appetite 欢迎您的使用
If you do much work on computers, eventually you find that there’s some task you’d like to automate. ...
- map关联容器
#include<map> map<k, v> m; 创建一个名为 m 的空 map 对象,其键和值的类型分别为 k 和 v map<k, v>m(m2);创建 m ...
- Servlet 中的out.print()与out.writer()的区别
PrintWriter out = response.getWriter(); out.print(obj)其源码如下: public void print(Object obj) { write(S ...
- CCI_chapter 1
1.1Implement an algorithm to determine if a string has all unique characters What if you can not us ...
- qt 拖拽 修改大小（使用了nativeEvent和winEvent）
http://www.cnblogs.com/swarmbees/p/5621543.html http://blog.sina.com.cn/s/blog_9e59cf590102w3r6.html
- 【剑指offer】面试题36：数组中的逆序对
题目: 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. 思路: 归并排序的合并过程.主要是考虑合并两个有序序列时,计算逆序 ...
- android图标设计事宜
1.Launcher图标 图标的最佳宽高是48x48 dp. ldpi:36*36px,0.75倍密度,一般不用提供,系统会从hdpi取图缩小1倍. mdpi:48*48px, 1倍密度 hdpi:7 ...
- vue-cli 脚手架总结
> vue-cli 的脚手架项目模板有browserify 和 webpack , 现在自己在用的是webpack , 官网给出了两个模板: webpack-simple 和 webpack 两 ...
- World Wind Java开发之十五——载入三维模型
之前的一篇博客是关于载入粗三维模型的,见http://blog.csdn.net/giser_whu/article/details/43452703,这个地方还存在着不能载入纹理的问题,一直没呢解决 ...
- ORA-24324、ORA-12560、ORA-12514
SQL> startup ERROR: ORA-24324: 未初始化服务句柄 ORA-01041: 内部错误, hostdef 扩展名不存在. SQL> conn sys /nolog; ...