先抛个例子出来

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

<!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开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  2. LIME：模型预測结果是否值得信任？

    花了一天时间对LIME论文:http://arxiv.org/pdf/1602.04938v1.pdf 细致阅读和代码阅读,实验.大体理解了作者的设计思路. 背景: 我们在建立模型的时候,常常会思考我 ...

  3. SQL优化- 数据库SQL优化——使用EXIST代替IN

    数据库SQL优化——使用EXIST代替IN 1,查询进行优化,应尽量避免全表扫描 对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引 . 尝试下面的 ...

  4. hibernate 继承映射关系（ TABLE_PER_CLASS)

    Person,Student,Teacher各创建一个表,主键用一个中间表生成.   package com.bjsxt.hibernate; import javax.persistence.Ent ...

  5. The user specified as a definer (&#39;root&#39;@&#39;%&#39;) does not exist

     通常是因为root用户对全局host无訪问权限.因此仅仅要给root用户加入一个訪问权限就可以. 解决的方法: 登陆mysql .运行 mysql -u root -pPasswd mysql ...

  6. windows lua 多线程 线程同步

    今天在改一个程序,改成部分逻辑用lua写,这个程序是多线程的.将程序中部分逻辑改成lua之后,各种非法访问内存错误,各种奇奇怪怪的问题,不分时间,不分地点的出现崩溃.从调用堆栈来看,基本都是使用lua ...

  7. CentOS 7 中 Docker 的安装和卸载

    安装Dokcer Docker 软件包已经包括在默认的 CentOS-Extras 软件源里.因此想要安装 docker,只需要运行下面的 yum 命令: [root@localhost ~]# yu ...

  8. datagridview 日期列排序

    1.datagridview 日期列排序 private void Form1_Load(object sender, EventArgs e) { //方法1 dataGridView1.Colum ...

  9. Android WebView 开发具体解释(三)

    转载请注明出处   http://blog.csdn.net/typename/article/details/40302351 powered by miechal zhao 概览 Android ...

  10. SDRAM驱动篇之简易SDRAM控制器的verilog代码实现

    在Kevin写的上一篇博文<SDRAM理论篇之基础知识及操作时序>中,已经把SDRAM工作的基本原理和SDRAM初始化.读.写及自动刷新操作的时序讲清楚了,在这一片博文中,Kevin来根据 ...