什么是浮动

浮动,故名思议,就是移动位置。

之所以不叫移动,而叫浮动,那是因为给元素设置浮动后,元素会浮到文档上面来,术语叫脱离文档流

例子

下面我们看例子

  1. <html>
  2. <head>
  3. <style>
  4. #div0 {
  5. /* 设置背景色为黄色 */
  6. background-color:yellow;
  7. /* 设置边框为1px的线条 */
  8. border:1px solid;
  9. /* 设置宽度为800px */
  10. width:800px;
  11. }
  12. #div1, #div2 {
  13. /* 设置宽度为300px */
  14. width:300px;
  15. /* 设置高度为300px */
  16. height:300px;
  17. /* 设置边框为1px的线条 */
  18. border:1px solid;
  19. }
  20. #div1 {
  21. /* 设置背景色为灰色 */
  22. background-color:#888;
  23. }
  24. #div2 {
  25. /* 设置背景色为蓝色 */
  26. background-color:#08c;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div id="div0">
  32. <div id="div1"></div>
  33. <div id="div2"></div>
  34. </div>
  35. </body>
  36. </html>

有三个div,其中一个大的#div0,里面含有两个子div#div1#div2

可以看到,大的黄色#div0,嵌套了一个灰色的#div1和一个蓝色的#div2

由于div块级元素,所以灰色黄色div不会在同一排显示。


测试1

这个时候,我们给#div1,设置右浮动

  1. #div1 {
  2. /* 设置背景色为灰色 */
  3. background-color:#888;
  4. /* 右浮动 */
  5. float:right;
  6. }


这个时候,可以看到,灰色的#div1到右边去了。

而黄色#div0的高度,只有一半了。

这是因为,当#div1浮动到右边后,它就脱离文档流了,来到文档的上方,也就是和原来的#div0#div2不在同一个层面上了。

这时候,#div0的高度,就等于是现在还在同一层面上#div2的高度。


测试2

我们再给#div2做个左浮动

  1. #div2 {
  2. /* 设置背景色为蓝色 */
  3. background-color:#08c;
  4. /* 左浮动 */
  5. float:left;
  6. }

发现#div0居然不见了,但是可以图片顶部,出现#div0的边框。

这是由于,#div1#div2都设置了浮动,它们都脱离了文档流,和#div0不在同一个层面上了。

也就是#div0里面没有了内容,就坍塌的只剩下边框了。


测试三

如果你需要#div0也有一个高度 ,刚好能包裹着浮动的子元素,那么你可以给#div0也设置一个浮动,这样他们就又在同一个层面上了。

  1. #div0 {
  2. /* 设置背景色为黄色 */
  3. background-color:yellow;
  4. /* 设置边框为1px的线条 */
  5. border:1px solid;
  6. /* 左浮动 */
  7. float:left;
  8. }

div的浮动(float)的更多相关文章

  1. DIV设置浮动float以后下一个DIV要换行的方法

    <div style=“float:left;”> 1111111 </div> <div style=“float:left;”>222222 </div& ...

  2. 【html】【6】div浮动float

    我想 当看完上面的必看链接,拥有一定的基础后也得7天左右, 记住 一定要看完,知道它都有什么,没学会不要紧,哪怕只是有个简单的概念也行, 随着后续的使用慢慢深入学习,现在开始div布局. 必看参考: ...

  3. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  4. 经验分享:CSS浮动(float,clear)通俗讲解

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  5. 关于浮动float属性和position:absolute属性的区别

    最近返回头看了很多书籍,一直在纠结float属性和absolute绝对定位的区别和使用的情况,给大家分享一下自己的心得和体会吧. 1,float属性 float属性意义是让元素拜托独占一行的霸道总裁, ...

  6. 经验分享:CSS浮动(float,clear)通俗讲解(转载)

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  7. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  8. 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了

    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...

  9. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

随机推荐

  1. ASP.NET-GridView之导出excel或word

    在CS阶段我们涉及到表格的导出,再Web开发同样可以实现,而且实现形式多种多样.以下面的例子说明表格导出到excel和word 这里用到了一个后台方法输出流形成***文件的的公共方法 DEMO < ...

  2. Frameset框架,在同一个浏览器窗口中显示不止一个页面

    总结一下.通过使用Frameset框架,可以在同一个浏览器窗口中显示不止一个页面. 先举个例子: 1 <frameset rows="100,*" cols="*& ...

  3. 《图解HTTP》阅读笔记--第十一章针对web的攻击技术

    第十一章.针对WEB的攻击技术 ----<图解HTTP>阅读笔记攻击目标---Web简单的HTTP协议本身并不存在安全性 问题,协议本身并不会成为被攻击的对象,应用HTTP的服务器和客户端 ...

  4. 平衡树学习笔记(3)-------Splay

    Splay 上一篇:平衡树学习笔记(2)-------Treap Splay是一个实用而且灵活性很强的平衡树 效率上也比较客观,但是一定要一次性写对 debug可能不是那么容易 Splay作为平衡树, ...

  5. luogu2513 逆序对数列

    我们令\(f[i][j]\)表示\(i\)的全排列中,逆序数为\(j\)的个数. 我们考虑在\(i-1\)的排列中插入\(i\).\(k\)是这次更新会导致增加多少逆序数. 则\(\begin{ali ...

  6. CF796B Find The Bone

    Zane the wizard is going to perform a magic show shuffling the cups. There are n cups, numbered from ...

  7. PAT天梯赛 L1-049 天梯赛座位分配

    题目链接:点击打开链接 天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i 所学校有 M[i] ...

  8. html td 限制 高度 和 宽度

    td 要设置成 display : block td 里面的span 自动换行.. <td style="max-width: 150px;overflow-y:scroll;disp ...

  9. python 批量下载 spring 的 xsd

    #coding=utf-8 import os import urllib import urllib2 import re from bs4 import BeautifulSoup # 利用 ur ...

  10. mysql——索引失效

    索引失效的几种情况:https://www.jianshu.com/p/9c9a0057221f