float w3cSchool里解释说，

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

他不占据文档流空间，因此我试验：
1、如果两个div，第一个正常，第二个设为浮动，是不是第二个就会覆盖掉第一个，但实际试验情况不是如此，第二个div还是在第一个div的下边显示；
2、连个div， 第一个设为浮动，第二个正常，显示结果为第一个浮动div覆盖第二个div。
因此我判断：例1-> 第二个div设为浮动后，确实不占据文档空间，但是引文第一个是普通文档，他占据了文档流空间，浮动元素认为上边的文档流都已占用，因此第二个浮动div要从下边显示。
        例2-> 第一个div设为浮动后，不占据文档空间，所以第二个普通文档会上移到第一个div的下面，因为他不认为上边有元素，所以会自动上移。

例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { margin:0;}
#side { float: left;}
#main { background: #99FFFF; height: 300px; }
#main1 { background: red; height: 500px; }
文章出处：标准之路(http://www.aa25.cn)
</style>
</head>

<body>
<div id="main">你好啊</div>
<div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>
<div id="main1">你好啊</div>

</body>
</html>

css样式 float的理解的更多相关文章

  1. css样式float造成的浮动“塌陷”问题的解决办法

    什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...

  2. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  3. css样式表的理解

    全拼Cascading Style Sheete 美化html网页 1分为 内联样式表 和html联合显示 内嵌样式表 在单独区域内嵌,必须在head 外部样式表 需建一个css文件,保存并附加 2选 ...

  4. 浏览器如何加载和解析CSS——CSS样式来源与层叠规则

    关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的? CSS层叠样式表的关键在于"层叠",会根据选择符的使用而将样式相互叠加或者覆盖. CSS样式表之所有有&q ...

  5. CSS之float样式总结

    从四大开始开始慢慢接触前端,大概半年多过去了,虽然做了一些东西,但感觉有些点始终不是很清晰.有时候为了赶进度,没有太多时间对某个点进行全面深入思考分析,只能从网上搜一搜,试一试,只要效果出来了,任务就 ...

  6. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. css样式加载顺序及覆盖顺序深入理解

    注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...

  8. CSS样式中ClearBoth的理解

    在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位 ...

  9. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

随机推荐

  1. js 文件上传

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  2. hihoCoder 1636 Pangu and Stones

    hihoCoder 1636 Pangu and Stones 思路:区间dp. 状态:dp[i][j][k]表示i到j区间合并成k堆石子所需的最小花费. 初始状态:dp[i][j][j-i+1]=0 ...

  3. onLoad和DomContentLoad的区别

    onLoad是的在页面所有文件加载完成后执行 DomContentLoad是Dom加载完成后执行,不必等待样式脚本和图片加载 domContentLoad更为合理, 原理: 如果是webkit引擎则轮 ...

  4. vs.net应用程序图标以及制作安装程序快捷方式图标设置

           我们通常在开发软件完毕后需要打包制作安装程序,这个时侯一般都会需要设置应用程序的图标,使用默认的图标一般都比较难看,那么我们应该怎样设置自定义的图标呢? 我现在要讲的图标设置有两种情况, ...

  5. java 中利用异或实现两个变量互换

    一般实现两个变量之间的互换要用第三个变量,这样做可以,但创建新变量,增加了系统开销.如果要交换的变量时两个整数型变量,可以用更高效的方法.例如:^(异或)操作,举例如下: package chapte ...

  6. Java远程调试 java -Xdebug各参数说明

    JAVA自身支持调试功能,并提供了一个简单的调试工具--JDB,类似于功能强大的GDB,JDB也是一个字符界面的 调试环境,并支持设置断点,支持线程线级的调试 JAVA的调试方法如下: 1.首先支持J ...

  7. SSH执行远程命令和传送数据

    $ ssh user@host 'mkdir -p .ssh && cat >> .ssh/authorized_keys' < ~/.ssh/id_rsa.pub ...

  8. Python的数据类型1数值和字符串

    Python的交互器 在讲这个之前,我要先讲一下python的交互器,之后讲解代码(除了做简单项目)都在交互器上进行,这样可能比较直接一些,有利于刚接触python的人理解代码 python在命令行自 ...

  9. JavaScript学习总结(七)——JavaScript函数(function)

    一.函数基本概念 为完成某一功能的程序指令(语句)的集合,称为函数. 二.JavaScript函数的分类 1.自定义函数(我们自己编写的函数),如:function funName(){} 2.系统函 ...

  10. en笔记音标

      清辅音和浊辅音区别 开音节和闭音节区别 1 2 3 4 5 6 7 a o e i u w y 开音节 /eɪ/ /əu/ /i:/ /aɪ/ Ju: /aɪ/ 闭音节 /æ/ /ɒ/ /ə/ / ...