先抛个例子出来

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            font-size: 50px;

        }

        p{

            float: left;

            background-color: yellow;

            margin: 50px;

        }

    </style>

</head>

<body>

    <span>

        <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>

    </span>

    <div>123</div>

</body>

</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. Vue webpack配置文件

    一.代码地址 github:https://github.com/MengFangui/VueWebpackConfig 二.配置说明 1.命令 (1)npm i 安装依赖包 (2)num run d ...

  2. android 内部类的优化

    developer.android.com 文档中有一篇关于性能的文章,里面提到了内部类的使用.文章建议"对于私有内部类 使用 包訪问权限取代私有权限訪问", 这里说的是在内部类訪 ...

  3. lucene 索引中文档的属性建立与不建立带来的影响总结

    索引中文档的属性建立与不建立带来的影响总结   1.依据文档的某属性去查找索引的话,只会返回带有此属性(如果你对当前属性设定了条件,那么需要满足当前条件)的所有文档,没有建立此属性的文档是不会在返回结 ...

  4. lucene 加速索引建立速度

    加速 lucene 索引建立速度 ImproveIndexingSpeed

  5. angularJS学习笔记（二）

    前言 首先,了解 一下ng的一些概念: module 代码的组织单元,其它东西都是定义在具体的模块中的. app 应用业务,需要多个模块的配合完成. service 仅在数据层面实现特定业务功能的代码 ...

  6. 在连接mysql数据库时出错：The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone

    这个错误是时区导致的,所以需要在配置连接url后面加上时区: url=jdbc:mysql://localhost:3309/test?serverTimezone=UTC 其中UTC是统一标准世界时 ...

  7. php对象序列化总出错false

    php unserialize 返回false的解决方法 php 提供serialize(序列化) 与unserialize(反序列化)方法. 使用serialize序列化后,再使用unseriali ...

  8. unity, 自定义类中使用print

    在unity脚本中自定义c#类,而且不继承MonoBehaviour的话,若还想在其中使用print函数,可以用MonoBehaviour.print(...).

  9. 淡入淡出效果模板 js

    html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  10. C++语言基础(6)-const 关键字

    在类中,如果你不希望某些数据被修改,可以使用const关键字加以限定.const 可以用来修饰成员变量.成员函数以及对象. 一 const 成员变量 const 成员变量的用法和普通 const 变量 ...