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

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

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

然后是以下的CSS文件,我们还是摘抄一下:

#demo1{
background-color: #933;
height: 100px;width:300px;
}
#demo2{
background-color: #0F0;
height:60px;width:200px;
}
#demo3{
background-color: #F00;
height: 140px;width: 250px;
}
#demo4{
background-color: #CCC;
height: 80px;width: 180px;
}

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

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

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

#demo1{
background-color: #933;
height: 100px;width:300px;
}
#demo2{
float: right;
background-color: #0F0;
height:60px;width:200px;
}
#demo3{
clear: both;
background-color: #F00;
height: 140px;width: 250px;
}
#demo4{
background-color: #CCC;
height: 80px;width: 180px;
}

效果图例如以下:

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

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

#demo1{
background-color: #933;
height: 100px;width:300px;
}
#demo2{
float: right;
background-color: #0F0;
height:60px;width:200px;
}
#demo3{
clear: left;
background-color: #F00;
height: 140px;width: 250px;
}
#demo4{
background-color: #CCC;
height: 80px;width: 180px;
}

结果图例如以下:

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

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

#demo1{
background-color: #933;
height: 100px;width:300px;
}
#demo2{
float: right;
background-color: #0F0;
height:60px;width:200px;
}
#demo3{
clear: both;
float: right;
background-color: #F00;
height: 140px;width: 250px;
}
#demo4{
background-color: #CCC;
height: 80px;width: 180px;
}

以下是效果解说:

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

此时css代码变成:

#demo1{
background-color: #933;
height: 100px;width:300px;
}
#demo2{
float: right;
background-color: #0F0;
height:60px;width:200px;
}
#demo3{
clear: both;
float: right;
background-color: #F00;
height: 140px;width: 250px;
}
#demo4{
clear: both;
background-color: #CCC;
height: 80px;width: 180px;
}

此时的效果例如以下:

到这里,我要讲的就所有讲完了。当我还是个小菜鸟的时候,也是一头雾水。听得迷迷糊糊。可是。我看了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. 详解HTML的a标签(超链接标签)

    原文 简书原文:https://www.jianshu.com/p/d6a2499db73b 大纲 1.什么是<a>标签 2.<a>标签的几个重要属性 3.a标签的运行机制 4 ...

  2. java根据xml配置文件导出excel通用方法

    java web项目中时常会用到导出功能,而导出excel几乎是每个项目必备的功能之一.针对形形色色的导出方法及个人平时的工作经验,特将导出excel方法整理成通用的方法,根据xml配置来实现特定的导 ...

  3. Perl自动释放Licence启动Verdi

    Perl自动释放Licence启动Verdi 在工作中,遇到verdi的License不够的情况,某些人占用了多个License,为及时获得一个可用的License,写了一个perl来kill运行时间 ...

  4. SAP ABAP编程 字符串加密-MD5_CALCULATE_HASH_FOR_CHAR

    DATA: str1 TYPE c LENGTH 12 VALUE 'zxcv',       str2 TYPE c LENGTH 32,       str3 TYPE c LENGTH 32. ...

  5. 【34.25%】【BZOJ 2648】SJY摆棋子

    Time Limit: 20 Sec  Memory Limit: 128 MB Submit: 2718  Solved: 931 [Submit][Status][Discuss] Descrip ...

  6. 【t053】整数去位

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 键盘输入一个高精度的正整数N,去掉其中任意M个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对 ...

  7. HTML Email 编写指南(转)

      作者: 阮一峰 日期: 2013年6月16日 今天,我想写一个"低技术"问题. 话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly.每周 ...

  8. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

  9. [NPM] Make npm scripts cross-environment friendly

    Unfortunately not all shell commands work across various environments. Two main techniques to suppor ...

  10. Erlang学习笔记2

    http://wgcode.iteye.com/blog/1007623 第二章 入门 1.所有的变量都必须以大写字母开头,如果要查看某个变量,只要输入变量的名字即可,如果一个变量被赋予值,就称为绑定 ...