上述博客文章，我们解释如何使用CSS浮子，这是一个看我们如何解释清除CSS浮子。其实CSS浮动是很清楚easy，只需要使用clear它财产，至于如何利用好它。很多人可能会表决雾，我是个新手的时候还经常迷路，清除浮动是个随机事件一样，当然。它不是，它的规律性非常强，就让辛星来给您剖析一下这个规律把。

首先还是上面的HTML文件，它的内容例如以下：

  1. <html>
  2. <head>
  3. 	<link rel="stylesheet" type="text/css" href="my.css">
  4. </head>
  5. <div id = "demo1">区块1</div>
  6. <div id = "demo2">区块2</div>
  7. <div id = "demo3">区块3</div>
  8. <div id = "demo4">区块4</div>
  9. </html>

然后是以下的CSS文件，我们还是摘抄一下：

  1. #demo1{
  2. 	background-color: #933;
  3. 	height: 100px;width:300px;
  4. 	 }
  5. #demo2{
  6. 	background-color: #0F0;
  7. 	height:60px;width:200px;
  8. }
  9. #demo3{
  10. 	background-color: #F00;
  11. 	height: 140px;width: 250px;
  12. }
  13. #demo4{
  14. 	background-color: #CCC;
  15. 	height: 80px;width: 180px;
  16. }

事实上要用clear清除浮动，紧紧抓住定义就能够了：clear的取值能够有四个，各自是none，left，right和both。

大家一定要注意一点，那就是它是清除浮动，它清除的谁的浮动，它清除的是前一个的浮动，比方clear:none。这个和没写一样。clear：left表示假设前一个是浮动元素，那么它不能在该元素的左边浮动，即假设我的clear属性是left。我绝对不同意有一个在我左边浮动的元素，取值为right即我不同意我的前一个在我右边浮动，取值为both，即我不同意我的前一个元素在我不论什么一边浮动。

我们能够让区块2右浮动，让区块3清除浮动，可是它本身不浮动。区块4也不浮动，那么代码例如以下：

  1. #demo1{
  2. 	background-color: #933;
  3. 	height: 100px;width:300px;
  4. 	 }
  5. #demo2{
  6. 	float: right;
  7. 	background-color: #0F0;
  8. 	height:60px;width:200px;
  9. }
  10. #demo3{
  11. 	clear: both;
  12. 	background-color: #F00;
  13. 	height: 140px;width: 250px;
  14. }
  15. #demo4{
  16. 	background-color: #CCC;
  17. 	height: 80px;width: 180px;
  18. }

效果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

那可能有人会问了：星哥。假设区块三使用clear：left。是不是就会紧挨着区块1了。答案是这种，我们改动CSS代码例如以下：

  1. #demo1{
  2. 	background-color: #933;
  3. 	height: 100px;width:300px;
  4. 	 }
  5. #demo2{
  6. 	float: right;
  7. 	background-color: #0F0;
  8. 	height:60px;width:200px;
  9. }
  10. #demo3{
  11. 	clear: left;
  12. 	background-color: #F00;
  13. 	height: 140px;width: 250px;
  14. }
  15. #demo4{
  16. 	background-color: #CCC;
  17. 	height: 80px;width: 180px;
  18. }

结果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

上面我们的区块3并没有使用浮动，大家理解起来会很easy。那么假设区块三使用了右浮动呢？看以下代码：

  1. #demo1{
  2. 	background-color: #933;
  3. 	height: 100px;width:300px;
  4. 	 }
  5. #demo2{
  6. 	float: right;
  7. 	background-color: #0F0;
  8. 	height:60px;width:200px;
  9. }
  10. #demo3{
  11. 	clear: both;
  12. 	float: right;
  13. 	background-color: #F00;
  14. 	height: 140px;width: 250px;
  15. }
  16. #demo4{
  17. 	background-color: #CCC;
  18. 	height: 80px;width: 180px;
  19. }

以下是效果解说：

那么此时大家可能会想。假设我的区块四清除了右浮动又该怎样呢?

此时css代码变成：

  1. #demo1{
  2. 	background-color: #933;
  3. 	height: 100px;width:300px;
  4. 	 }
  5. #demo2{
  6. 	float: right;
  7. 	background-color: #0F0;
  8. 	height:60px;width:200px;
  9. }
  10. #demo3{
  11. 	clear: both;
  12. 	float: right;
  13. 	background-color: #F00;
  14. 	height: 140px;width: 250px;
  15. }
  16. #demo4{
  17. 	clear: both;
  18. 	background-color: #CCC;
  19. 	height: 80px;width: 180px;
  20. }

此时的效果例如以下：

到这里，我要讲的就所有讲完了。当我还是个小菜鸟的时候，也是一头雾水。听得迷迷糊糊。可是。我看了N多人的博客，听了N多人的解释，最终明确了。

当然。我敢肯定，我看的那些博客里有错误的解说，但这在绝对正确性可以放心。。。

版权声明：本文博客原创文章，博客，未经同意，不得转载。

辛星与您彻底解决CSS浮子（下一个）的更多相关文章

  1. 辛星彻底帮您解决CSS中的浮动问题

    浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...

  2. 辛星跟您解析在CSS面包屑中三角形的定位问题

    刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...

  3. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  4. 2014年辛星完全解读Javascript第一节

    ***************概述*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大小写,主要运行在客户端,用户即使响应用户的操作并进行数 ...

  5. 2014在辛星Javascript口译科

    ***************概要*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大写和小写.主要执行在client,用户即使响应用户的操 ...

  6. 2014年度辛星css教程夏季版第二节

    第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...

  7. 2014年辛星解读css第二节

    第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...

  8. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  9. 2014年度辛星css教程夏季版第五节

    本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...

随机推荐

  1. 洛谷 P4013 数字梯形问题

    ->题目链接 题解: 网络流. #include<cstdio> #include<iostream> #include<queue> #include< ...

  2. 【u122】迎接仪式

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] LHX教主要来X市指导OI学习工作了.为了迎接教主,在一条道路旁,一群Orz教主er穿着文化衫站在道路 ...

  3. XHTML 结构化：使用 XHTML 重构网站 分类： C1_HTML/JS/JQUERY 2014-07-31 15:58 249人阅读 评论(0) 收藏

    http://www.w3school.com.cn/xhtml/xhtml_structural_01.asp 我们曾经为本节撰写的标题是:"XHTML : 简单的规则,容易的方针.&qu ...

  4. mysql分区功能（三个文件储存一张表）（分区作用）（分区方式）

    mysql分区功能(三个文件储存一张表)(分区作用)(分区方式) 一.总结 1.mysql数据表的存储方式(三个文件储存一张表): 一张表主要对应着三个文件,一个是frm存放表结构的,一个是myd存放 ...

  5. Android JAVA中的时间大小比较

    import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; imp ...

  6. cmake使用总结(转）---工程主目录CMakeList文件编写

    在linux 下进行开发很多人选择编写makefile 文件进行项目环境搭建,而makefile 文件依赖关系复杂,工作量很大,搞的人头很大.采用自动化的项目构建工具cmake 可以将程序员从复杂的m ...

  7. html5如何实现元素拖放

    html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...

  8. javaScript实现图片滚动及一个普通图片轮播的代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. iOS 利用FZEasyFile本地保存 和 常规保存

    1.常规保存(较麻烦) NSFileManager *fileManager = [NSFileManager defaultManager]; //获取document路径,括号中属性为当前应用程序 ...

  10. 检索05 --static静态方法 和 非静态方法

    C#静态变量使用static 修饰符进行声明,在类被实例化时创建,通过类进行访问不带有 static 修饰符声明的变量称做非静态变量,在对象被实例化时创建,通过对象进行访问一个类的所有实例的同一C#静 ...