css样式 float的理解
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的理解的更多相关文章
- css样式float造成的浮动“塌陷”问题的解决办法
什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...
- 关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
- css样式表的理解
全拼Cascading Style Sheete 美化html网页 1分为 内联样式表 和html联合显示 内嵌样式表 在单独区域内嵌,必须在head 外部样式表 需建一个css文件,保存并附加 2选 ...
- 浏览器如何加载和解析CSS——CSS样式来源与层叠规则
关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的? CSS层叠样式表的关键在于"层叠",会根据选择符的使用而将样式相互叠加或者覆盖. CSS样式表之所有有&q ...
- CSS之float样式总结
从四大开始开始慢慢接触前端,大概半年多过去了,虽然做了一些东西,但感觉有些点始终不是很清晰.有时候为了赶进度,没有太多时间对某个点进行全面深入思考分析,只能从网上搜一搜,试一试,只要效果出来了,任务就 ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css样式加载顺序及覆盖顺序深入理解
注:内容转载 很多的新手朋友们对css样式加载顺序和覆盖顺序的理解有所偏差,下面用示例为大家详细的介绍下,感兴趣的朋友不要错过 { height: 100%; width: 200; position ...
- CSS样式中ClearBoth的理解
在CSS中我们会经常要用到“清除浮动”Clear,比较典型的就是clear:both; CSS手册上是这样说明的:该属性的值指出了不允许有浮动对象的边.这个属性是用来控制float属性在文档流的物理位 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
随机推荐
- 【Golang】Debug :decoding dwarf section info at offset 0x0: too short
解决方法 通过下面的方式升级dlv 来解决这个问题: go get -u github.com/derekparker/delve/cmd/dlv 下面是我记录的定位问题的过程 问题描述 博主升级到了 ...
- HDU2017新生赛 找方块
思路: 先n^3预处理出每个点能到达的(1010串)最上面的行下标. 然后再n^3暴力一下,对于每个点,往左走看能走到哪,边走边更新面积. 代码: #include<bits/stdc++.h& ...
- webpack和tree shaking和rollup
http://blog.csdn.net/haodawang/article/details/77199980 tree shaking只对es模块生效,在打包tyscript模块是要使用tsc编译器 ...
- C#怎样用文件读写在文件的原有基础上追加一行数据
首先添加命名空间using System.IO;这里有两种方法,希望对你有帮助,操作文件时,一定要记得及时关闭流. 第一种方法: string path="D\1.txt";//文 ...
- Python并行(parallel)之谈
简介 可以先看看并发Concurrent与并行Parallel的区别 在谈并行前,头脑中总会浮出多线程.多进程.线程/进程同步.线程/进程通信等词语. 那为什么需要同步.通信,它们之间的作用是怎样的呢 ...
- python-day21--random模块
>>> import random #随机整数 >>> random.randint(1,5) # 大于等于1且小于等于5之间的整数 >>> ra ...
- SSM框架整合(实现从数据库到页面展示)
SSM框架整合(实现从数据库到页面展示) 首先创建一个spring-web项目,然后需要配置环境dtd文件的引入,环境配置,jar包引入. 首先让我来看一下ssm的基本项目配件.(代码实现) 1.首先 ...
- Hash索引和BTree索引
索引是帮助mysql获取数据的数据结构.最常见的索引是Btree索引和Hash索引. 不同的引擎对于索引有不同的支持:Innodb和MyISAM默认的索引是Btree索引:而Mermory默认的索引是 ...
- UVALive 4168
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA08AAABMCAIAAAA6IBt+AAAgAElEQVR4nO1dybXjOg7tWJSK65yKxL
- webservice 基本要点
webservice的特点 webservices是自我包含的 webservices是自我描述的 webservices是跨平台和语言的 webservices是基于开放和标准的 webservic ...