辛星彻底帮您解决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中去,里面的内容根据需求左浮动或者右浮动,然后记得加上清除浮动. ...
随机推荐
- zoj 2778 - Triangular N-Queens Problem
题目:在三角形的棋盘上放n皇后问题. 分析:找规律题目.依照题目的输出,能够看出构造法则: 先填奇数,后填偶数.以下我们仅仅要证明这样的构造的存在性就可以. 解法:先给出集体构造方法,从(1.n-f( ...
- How to install Armbian on Orange Pi Plus 2e
bian on Orange Pi Plus 2e How to install Armbian on Orange Pi Plus 2e Armbian on the microSD You jus ...
- zoj 1119 / poj 1523 SPF (典型例题 求割点 Tarjan 算法)
poj : http://poj.org/problem?id=1523 如果无向图中一个点 u 为割点 则u 或者是具有两个及以上子女的深度优先生成树的根,或者虽然不是一个根,但是它有一个子女 w, ...
- 49.大量qq号及qq密码挖掘到结构体并实现精确分配内存以及快速排序
原数据: 处理后的数据: 完整代码: //思路; //数据清洗(把空格替换成'\0') -> 精确获取每一行(要提前获取source的总长度) -> 获取出每一行再精确分割并把分割后的数据 ...
- POJ 2323 贪心
题意: 思路: 贪 贪 贪 如果当前的c>之前的c+s 那么之前的合适 一直贪下去就好了 //By SiriusRen #include <cstdio> #include < ...
- MATLAB —— 编程基础
字符串 abs —— 输出字符串ascii码 strvcat —— 把多个字符串横向连接成长字符串 fprintf —— 把格式化的文本写到文件中或显示屏上 int2str —— 整数转换成字符串 n ...
- PCA and Whitening on natural images
Step 0: Prepare data Step 0a: Load data The starter code contains code to load a set of natural imag ...
- Node.js REPL(交互式解析器)
Node.js REPL(交互式解释器) Node 自带了交互式解释器,可以执行以下任务: 读取 - 读取用户输入,解析输入了Javascript 数据结构并存储在内存中. 执行 - 执行输入的数据结 ...
- C# WinForm设置透明
1:通过设置窗体的 TransparencyKey实现 例:窗体中的白色会变成透明 this.BackColor =Color.White; this.TransparencyKey = ...
- Codeforces 129A-Cookies（暴力）
A. Cookies time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...