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.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
随机推荐
- phaser小游戏框架学习（二）
今天继续学习phaser.js.上周写的学习教程主要内容是创建游戏场景,游戏中的显示对象,按钮对象的使用以及如何在不同屏幕大小中完美适配.这篇博客以介绍游戏榜单的渲染更新为主. 代码地址:https: ...
- CF581C Developing Skills 模拟
Petya loves computer games. Finally a game that he's been waiting for so long came out! The main cha ...
- 【模板】割点（割顶） Tarjan
题目背景 割点 题目描述 给出一个nnn个点,mmm条边的无向图,求图的割点. 输入输出格式 输入格式: 第一行输入n,mn,mn,m 下面mmm行每行输入x,yx,yx,y表示xxx到yyy有一条边 ...
- anglarJs前端控制器的继承
继承就是将相关内容进行抽离,将公共部分进行分离,然后被其他模块继承就可以实现多用 例如抽离分页部分: //品牌控制层 app.controller('baseController' ,function ...
- Ubuntu系统中连接TFS的Git地址注意事项
在Ubuntu中安装Git后,配置远程Git服务器地址,如果是TFS的Git仓库地址,则需要使用IP地址,否则可能出现识别不出来的问题; 再者,如果你想要在Ubuntu的浏览中访问TFS的Git仓库U ...
- Luogu P2073 送花 set
这题...一眼set...但是打了一会儿.. 记录一下每个价格对应的美丽度,顺便充当vis数组,如果美丽度不为0,说明set里已经有了... 删除好说,删*s.begin()和*--s.end()就好 ...
- Folyd算法（转+适合问题 ）
Folyd算法适合多源最短路的求解问题(时间复杂度(O(n^3)),单源无负权值的问题适合Dijstra(O(n^2)) 小Hi强行装作没听到,继续说道:"这个算法的核心之处在于数学归纳法- ...
- P2913 [USACO08OCT]车轮旋转Wheel Rotation
传送门 初始状态是 0,如果有 1 的连接,0 就变 1,如果还有 1 的连接,1 就变 0,如果是 0 的连接就不变 所以就是把答案异或上所有连接,不用考虑顺序,反正最终是一样的 #include& ...
- lintcode - 统计比给定整数小的数的个数(两种方法)
class Solution { public: /* * @param A: An integer array * @param queries: The query list * @return: ...
- js删除数组中的 "NaN"
[注意] js中的NaN不和任何值相等,包括自身 所以可以使用 x!=x 来判断x是否是NaN,当且仅当x为NaN时,表达式的结果为true NaN != NaN ; //true 可以依此删除数组中 ...