辛星与您彻底解决CSS浮子（下一个）
上述博客文章，我们解释如何使用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浮子（下一个）的更多相关文章
- 辛星彻底帮您解决CSS中的浮动问题
浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...
- 辛星跟您解析在CSS面包屑中三角形的定位问题
刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- 2014年辛星完全解读Javascript第一节
***************概述*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大小写,主要运行在客户端,用户即使响应用户的操作并进行数 ...
- 2014在辛星Javascript口译科
***************概要*************** 1.Javascript是一种原型化继承的基于对象的动态类型的脚本语言,它区分大写和小写.主要执行在client,用户即使响应用户的操 ...
- 2014年度辛星css教程夏季版第二节
第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...
- 2014年辛星解读css第二节
第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
- 2014年度辛星css教程夏季版第六节
这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...
- 2014年度辛星css教程夏季版第五节
本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...
随机推荐
- 【48.47%】【POJ 2524】Ubiquitous Religions
Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 32364 Accepted: 15685 Description There a ...
- HDU1575-Tr A(矩阵高速幂)
题目链接 题意:A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. 思路:简单的矩阵高速幂 代码: #include <iostream> #i ...
- Hadoop入门经典:WordCount 分类： A1_HADOOP 2014-08-20 14:43 2514人阅读 评论(0) 收藏
以下程序在hadoop1.2.1上测试成功. 本例先将源代码呈现,然后详细说明执行步骤,最后对源代码及执行过程进行分析. 一.源代码 package org.jediael.hadoopdemo.wo ...
- php求和为s的两个数字（多复制上面写的代码，有利于检查错误）（由浅入深，先写简单算法，做题的话够用就行）
php求和为s的两个数字(多复制上面写的代码,有利于检查错误)(由浅入深,先写简单算法,做题的话够用就行) 一.总结 1.多复制上面写的代码,有利于检查错误 2.一层循环就解决了,前后两个指针,和大了 ...
- Android String与十六进制数互转
/** * 字符串转换成十六进制字符串 * @param String str 待转换的ASCII字符串 * @return String 每个Byte之间空格分隔,如: [61 6C 6B] */ ...
- [Compose] 8. A curated collection of Monoids and their uses
const { List } = require('immutable-ext'); const Right = x => ({ chain : f => f(x), ap : other ...
- Android 使用Canvas在图片上绘制文字
一个小应用,在图片上绘制文字,以下是绘制文字的方法,并且能够实现自动换行,字体自动适配屏幕大小 private void drawNewBitmap(ImageView imageView, Stri ...
- Android MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器
说到 ViewPager 指示器,想必大家都不陌生,绝大部分应用中都有这个.使用频率非常之高.但系统对它的支持并不好,自带的 PagerTabStrip 和 PagerTitleStrip 太弱,很难 ...
- 利用PS把多张psd格式的图片转换为一张PDF格式
最近为公司做了一版电子样册,所有图片都是包含多图层高清晰的psd格式,要做成一个PDF文件的电子样册,发给客户看,面对这些零散的图片,本来打算利用在线合成:在线网址 https://smallpdf. ...
- PatentTips - Hardware virtualization such as separation kernel hypervisors
BACKGROUND 1. Field Innovations herein pertain to computer virtualization, computer security and/or ...