辛星彻底帮您解决CSS中的浮动问题
浮动，是CSS布局中必须经过的一道坎，假设不熟悉浮动。那么CSS的布局就如同空中楼阁，而谈到浮动，很多其它的是和div相结合，div是一个块级元素。这个我前面的博文有介绍，假设大家喜欢我的风格，能够搜索下。
以下我们进入正题，所谓浮动。能够用css的属性float来定义。比方float:left就是向左浮动，float：right就是向右浮动，我们先看一个不浮动的样例把，首先是这个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>
然后我们写一下它的相应的my.css文件，内容例如以下：
#demo1{
background-color: #933;
height: 100px;width:300px;
}
#demo2{
background-color: #0F0;
height:60px;width:200px;
}
#demo3{
background-color: #F00;
height: 140px;width: 80px;
}
#demo4{
background-color: #CCC;
height: 80px;width: 180px;
}
那么此时它的界面例如以下：
以下我们通过在第二个div那里让它右浮动，加入以下一条信息，即：
#demo2{
float: right;
background-color: #0F0;
height:60px;width:200px;
}
我上面仅仅给出了demo2的变化，然后我们看以下的效果：
以下说一下什么是“普通流”，可能这是会让新手朋友特别迷茫的一个话题。所谓普通流，就是向书本一样。从上到下，从左到右进行布局，正常的HTML元素都是在普通流中的。而一个元素一旦浮动，它就不在普通流中了。比方我们的区块2是右浮动的，它会去寻找他的上边一个元素，它上一个元素是区块1。而区块1是普通流中的元素。则区块2就和区块1的底部是对齐的，普通流决定了它的上下位置，浮动仅仅能决定它的左右位置，一旦上下位置 被确定，那么接下来就是它的左右位置了。因为它是右浮动，因此，它在右边。而区块三去找它的上一个元素，发现它的上一个元素是标准流中的元素。因此，它会自己主动和区块1的低端对齐。而且向下排列。
那可能有人会问，假设区块2左浮动呢。我们把demo2的float属性改动为left。而且我们改动一下区块三的宽度。让它更宽一些，要不解释不清楚，效果图例如以下：
我想上图的解释也算比較清楚了，就不再文字说明了。可能有人会问，那么假设两个区块一起浮动呢？我们先来看都是右浮动的情形：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
因为这里的宽度足够宽，这样的布局全然放得下，可是，假设我们把宽度变窄呢？看以下图解：
事实上这里还算好理解的。那么我们继续向左拉伸呢？会出现以下的情况：
事实上仅仅要宽度足够宽。区块3依旧是和区块2的左边而不是在它的以下，可是宽度太低的情况下就不是这样了，它非常无奈的跑到了区块2的以下，然后另起一行，从右边開始排列。
事实上右浮动会定位了，那么左浮动也就非常清楚了。它的效果例如以下：
事实上相同的，假设空间过小，那么区块3也会被挤下去。挤到新的一行中。例如以下代码：
于是，能够总结为这么一句话：“浏览器首先对处于普通流的区块进行排列，它们非常easy。从上到下进行排列就可以。对于浮动的元素，它会查看它上面的元素近期的哪一个处于普通流中的元素，而且把它的底端当成自己的顶端，然后依据浮动规则。继续排列。因为是先进行的普通流的布局。因此，浮动的元素会遮盖普通流中的元素。”
这一节先说到这里啦。。。 以下再開始说清楚浮动的。。。。
辛星彻底帮您解决CSS中的浮动问题的更多相关文章
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- 辛星与您彻底解决CSS浮子（下一个）
上述博客文章,我们解释如何使用CSS浮子,这是一个看我们如何解释清除CSS浮子.其实CSS浮动是很清楚easy,只需要使用clear它财产,至于如何利用好它.很多人可能会表决雾,我是个新手的时候还经常 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
- 如何理解CSS中的浮动 ：其实他就像乘坐扶梯一样
只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想 ...
- CSS学习系列4 -- 再说CSS中的浮动运用及clear:left/right实际用法
在 CSS学习系列2 -- CSS中的清除浮动 中,我们详细说了CSS中清除浮动的方法及使用 后来我自己在项目开发一个需要使用浮动的网页时,进行了实际运用,加上后来看到一篇好文章.所以就在这里再次写篇 ...
- css 中的浮动
css中 浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中 浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐 ...
- css3-9 css中的浮动怎么使用
css3-9 css中的浮动怎么使用 一.总结 一句话总结:用来做一般的行效果,比如说手机左右分布的头部导航栏.浮动的东西放到一个div中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...
随机推荐
- 自己写unicode转换ascii码，wchar*到char*
对于ascii码的char事实上就是unicode码wchar的首个字节码, 如wchar[20] = "qqqq"; 在内存中排码事实上是char的'q' '\0'这类.因此我们 ...
- iOS8 对开发人员来说意味着什么？
今天凌晨.Apple WWDC2014 iOS8 正式推出. 或许,对于广大iOS用户来说,iOS8的创新并非特别多. 但对于开发人员来说,影响却将会是无比巨大的! 正如Apple官网上的广告:Hug ...
- Zabbix + Grafana
Grafana 简介 Grafana自身并不存储数据,数据从其它地方获取.需要配置数据源 Grafana支持从Zabbix中获取数据 Grafana优化了图形的展现,可以用来做监控大屏 Grafana ...
- django shell 操作
插件:django-extensions django-extensions==1.9.8 pip3 install django-extensions 1.数据库shell 命令(项目目录下) p ...
- 数据库事务及其EF中如何处理事务
一.基础知识 1) 使用事务级别ReadUnCommited 会产生脏读现像,意味着读取到的为UnCommited(未提交)的数据.怎么理解呢?在使用该隔离级别的事务开始后.更新了数据 ...
- 让JavaScript在Visual Studio 2015中编辑得更easy
微软公布的Visual Studio 2015展示了该公司对于让该开发工具更好的支持主流的开发语言的工作.微软项目经理Jordan Matthiesen已经具体列出了一些具体处理JavaScript开 ...
- 多线程编程（二）--进程&&线程
看完上篇博文的介绍后,大家应该大概了解进程和线程的由来.有了这样一个背景我们进一步来看一下线程和进程. 引入进程: 进程能够提高系统的并发性.提高CPU的使用率,从而提高程序的性能.在曾经单道操作系统 ...
- 团队作业-Beta冲刺（3）
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...
- Flume的Storage&Master
storage是存储系统,可以是一个普通file,也可以是HDFS,HIVE,HBase,分布式存储等. Master是管理协调Agent和Collector的配置等信息,是flume集群的控制器.
- geotools修改shapefile 属性名乱码问题
在GeoServer中文社区的讨论地址为:http://opengeo.cn/bbs/read.php?tid=1701&page=e&#a 使用geotools修改shapefile ...