如果你想第三个p不被前面的浮动层所影响，就对它进行清除
如果没有清除，第三个层就会移到第一个p下面

记住!!浮动是用来布局的~你看你的网页设计图,好几个版块在一条线上就是要浮动了,不需要浮动就是版块跟前面的版块不在一行上了...

不知道能不能明白...

例如:下面的例子,版块1和版块2是在一行上的,那么他们就要浮动起来,好放在一行里面,但是到版块3的时候就要换行了,那就不能浮动了,那么这个时候就要清除一下浮动了...
<html>
<head>
<style>
.div1{float:left;width:100px;height:100px;background:#f00;}
.div2{float:left;width:100px;height:100px;background:#0f0;}
.div3{clear:both;width:100px;height:100px;background:#00f;}
</style>
</head>
<body>
<div class="div1">版块1</div>
<div class="div2">版块2</div>
<div class="div3">版块3</div>
</body>
</html>

明白否?

清除浮动的 why的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  3. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...

  4. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  5. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

  8. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  9. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  10. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

随机推荐

  1. IIS-Server is too busy _解决方法

    httpRuntime Server Too Busy 修改方法:修改服务器.net配置“machine.config＂文件,该文件位于Windows系统目录下,如“C:\WINDOWS \Micro ...

  2. LeetCode "Russian Doll Envelopes"

    An intuitive DP - should be 'medium'. class Solution { public: int maxEnvelopes(vector<pair<in ...

  3. python学习-day14：集合，函数，格式化

    一.集合 定义:由不同元素组成的集合.集合是一组无序排列的可hash值, 可以作为字典的key.元素必须是不可变类型:只能存放数字,字符串,字典 特性:集合的目的是将不同的值放在一起,不同的集合之间可 ...

  4. context menu与submenu区别

    http://blog.csdn.net/liuxiit/article/details/6819235 总结调用顺序: 点击“Menu" 键时,调用 onCreateOptionsMenu ...

  5. pl/sql和sql的区别

    源地址:https://zhidao.baidu.com/question/187511430.html 1 sql(数据定义语言) 和PL/Sql的区别:答:SQL是结构化查询语言,比较接近自然语言 ...

  6. iframe自适应高度(兼容IE 火狐 谷歌)

    <div id="leamain"> <iframe src="#" marginheight="0" marginwid ...

  7. [POJ 1988] Cube Stacking (带值的并查集)

    题目链接:http://poj.org/problem?id=1988 题目大意:给你N个方块,编号从1到N,有两种操作,第一种是M(x,y),意思是将x所在的堆放到y所在的堆上面. 第二种是C(x) ...

  8. Nginx作为负载均衡服务器（Windows环境）

    一个最简单的负载均衡测试,不涉及到session复制,只是将请求分配到不同的服务器上去而已. 1.创建一个简单的web应用.只有一个index.jsp页面,,内容如下. <%@ page lan ...

  9. .net一次连接执行多条sql语句

    方法一: string SQLString="select 1; select 2;"; using (OdbcConnection connection = new OdbcCo ...

  10. 【转】web测试总结

    1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&符号.禁止直接输入特殊字符时,使用“粘贴.拷 ...