div的浮动(float)
什么是浮动
浮动，故名思议，就是移动位置。
之所以不叫移动，而叫浮动，那是因为给元素设置浮动后，元素会浮到文档上面来，术语叫脱离文档流。
例子
下面我们看例子
<html><head><style>#div0 {/* 设置背景色为黄色 */background-color:yellow;/* 设置边框为1px的线条 */border:1px solid;/* 设置宽度为800px */width:800px;}#div1, #div2 {/* 设置宽度为300px */width:300px;/* 设置高度为300px */height:300px;/* 设置边框为1px的线条 */border:1px solid;}#div1 {/* 设置背景色为灰色 */background-color:#888;}#div2 {/* 设置背景色为蓝色 */background-color:#08c;}</style></head><body><div id="div0"><div id="div1"></div><div id="div2"></div></div></body></html>
有三个div，其中一个大的#div0，里面含有两个子div，#div1和#div2。
可以看到，大的黄色#div0，嵌套了一个灰色的#div1和一个蓝色的#div2。
由于div是块级元素，所以灰色和黄色的div不会在同一排显示。
测试1
这个时候，我们给#div1，设置右浮动。
#div1 {/* 设置背景色为灰色 */background-color:#888;/* 右浮动 */float:right;}
这个时候，可以看到，灰色的#div1到右边去了。
而黄色#div0的高度，只有一半了。
这是因为，当#div1浮动到右边后，它就脱离文档流了，来到文档的上方，也就是和原来的#div0、#div2不在同一个层面上了。
这时候，#div0的高度，就等于是现在还在同一层面上#div2的高度。
测试2
我们再给#div2做个左浮动
#div2 {/* 设置背景色为蓝色 */background-color:#08c;/* 左浮动 */float:left;}
发现#div0居然不见了，但是可以图片顶部，出现#div0的边框。
这是由于，#div1和#div2都设置了浮动，它们都脱离了文档流，和#div0不在同一个层面上了。
也就是#div0里面没有了内容，就坍塌的只剩下边框了。
测试三
如果你需要#div0也有一个高度 ，刚好能包裹着浮动的子元素，那么你可以给#div0也设置一个浮动，这样他们就又在同一个层面上了。
#div0 {/* 设置背景色为黄色 */background-color:yellow;/* 设置边框为1px的线条 */border:1px solid;/* 左浮动 */float:left;}
div的浮动(float)的更多相关文章
- DIV设置浮动float以后下一个DIV要换行的方法
<div style=“float:left;”> 1111111 </div> <div style=“float:left;”>222222 </div& ...
- 【html】【6】div浮动float
我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享：CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 关于浮动float属性和position:absolute属性的区别
最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...
- 经验分享：CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- CSS学习笔记——CSS中定位的浮动float
昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...
- 经验分享：CSS浮动(float,clear)通俗讲解 太棒了，清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
随机推荐
- hdu4622(后缀自动机模板)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4622 题意: 先输入一个长度为 n 的字符串, 然后有 q 个形如 l, r 的询问, 对于每个询问 ...
- 最短路【洛谷P3946】ことりのおやつ（小鸟的点心）
P3946 ことりのおやつ(小鸟的点心) 滑完雪之后,ことり突然想吃点心啦!于是她去了甜品店. 日本的冬天经常下雪.不幸的是,今天也是这样,每秒钟雪的厚度会增加q毫米. 秋叶原共有n个地点,编号从1到 ...
- 「产品经理全连接系列1」Epic/Feature/Story/Task/Bug到底是什么
大家好,我是华为云的产品经理 恒少: 作为布道师和产品经理,出差各地接触客户是常态,经常和华为云的客户交流.布道.技术沙龙,但是线下交流,覆盖的用户总还是少数. 我希望可以借线上的平台,和用户持续交流 ...
- lambda函数/排序/filter/map
1.lambda 匿名函数 zrf = lambda x:x**2 ret = zrf(10) #这里面实际上还是有函数名 print(ret) 2.sorted 排序(list也自带排序功能) 排序 ...
- IT网址大全
图像处理 [素材] 在线作图 [素材] 思缘设计论坛 [素材] ps联盟 [素材] ps学习网 [素材] ps教程论坛 [素材] ps爱好者 [素材] 46ps [素材] ...
- php 伪造HTTP_REFERER页面URL来源的三种方法
php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER']; 但是$_SERVER['HTTP_REFERER']也是可以被伪 ...
- 80C51单片机介绍
80C51单片机属于MCS-51系列单片机,由Intel公司开发,其结构是8048的延伸,改进了8048的缺点. 增加了如乘(MUL).除(DIV).减(SUBB).比较(CMP).16位数据指针.布 ...
- WebServcies 调用方法异常：System.Web.HttpRequestValidationException: 从客户端中检测到有潜在危险的 Request.Form 值。
我在做WebServcies时,页面调试,报类了下面这样的错误信息: System.Web.HttpRequestValidationException: 从客户端(checkXML="&l ...
- ubuntu下用apt-get安装lamp缺少mcrypt , curl
用apt-get安装的LAMP环境,但安装magento报没有mcrypt和curl, 解决方法如下: curl安装: sudo apt-get install curl libcurl3 lib ...
- wait、notify和notifyAll
生产者消费者模型是我们学习多线程知识的一个经典案例,一个典型的生产者消费者模型如下: public void produce() { synchronized (this) { while (mBuf ...