先抛个例子出来

运行下面的例子后，可以看到输出内容如下。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         div{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.             font-size: 50px;
  12.  
  13.         }
  14.         p{
  15.             float: left;
  16.             background-color: yellow;
  17.             margin: 50px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <span>
  23.         <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p>
  24.     </span>
  25.     <div>123</div>
  26.  
  27. </body>
  28. </html>

可以看到p元素浮动后，把后面的div给分离了，div的背景由于看不到浮动元素，所以左上角去了，而div的内容123由于能够看到浮动元素，所以被放到浮动元素后一行显示。也就是说由于浮动流的存在导致div如法包裹“”123“”这几个文字。

为了使div的块和内容统一，那肯定得消除浮动，消除浮动的方法，请看上一篇文章。

下面再看一个奇怪的现象。代码及效果如下。原因我还在探究中，有了解的可以先留言。

而且随着窗口减小，内容123显示的越来越少。

CSS Float浮动所带来的奇怪现象的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  3. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  4. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  5. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  6. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  7. css float 浮动

    CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...

  8. CSS：CSS Float(浮动)

    ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...

  9. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

随机推荐

  1. 设计模式学习笔记--备忘录(Mamento)模式

    写在模式学习之前 什么是设计模式:在我们进行程序设计时,逐渐形成了一些典型问题和问题的解决方式,这就是软件模式:每个模式描写叙述了一个在我们程序设计中常常发生的问题,以及该问题的解决方式:当我们碰到模 ...

  2. androidstudio新建项目中在布局文件中不显示title的方法

    在androidstudio新建项目的时候,在布局文件里有时候会出现如下情况: 上面的标题栏非常碍眼,要想隐藏标题栏的话,可以在Manifest文件的theme标签里进行配置,自定义一个theme,加 ...

  3. lucene 范围搜索表达式(range expression)

    实际测试 lucene范围符号,大于等于或小于等于符号[],大于或小于符号{}   newIntRange或newLongRange一样     代码:           // test lucen ...

  4. es模板

    Index Templatesedit Index templates allow you to define templates that will automatically be applied ...

  5. jQuery select的操作实现代码

          //改变时的事件  $("#testSelect").change(function(){ //事件发生生 jQuery('option:selected', this ...

  6. Linux命令常用命令

    查看主机IP ifconfig 切换目录 cd cd /home cd /path cd ../path cd 退到home目录 cd .. 退到上层目录 cd / 退到根目录  ls -l 列出数据 ...

  7. 经过Nginx代理后如何区分HTTP请求头中的X-Forwarded-For和X-Real-IP，以及Java示例

    在开发工作中,我们常常需要获取客户端的IP.一般获取客户端的IP地址的方法是:request.getRemoteAddr();但是在通过了Apache,Squid等反向代理软件就不能获取到客户端的真实 ...

  8. Lucene4.0 LogMergePolicy

    其特点是给定的段列表顺序归并,不像TieredMergePolicy那样按大小排序之后决定. norm = log(10),levelFloor=log(minMergeSize)/norm,对段列表 ...

  9. Atitit. visual studio vs2003 vs2005 vs2008  VS2010 vs2012 vs2015新特性 新功能.doc

    Atitit. visual studio vs2003 vs2005 vs2008  VS2010 vs2012 vs2015新特性 新功能.doc 1.1. Visual Studio2 1.2. ...

  10. C6455 CSL_EMIF详解

    C6455 CSL_EMIF详解 原网址http://www.61ic.com/Article/C6000/C64X/201303/47507.html C6455CSL详解 和DSP6455的EMI ...