overflow可以使浮动元素回归文档流，但是浮动元素却仍然具有浮动的属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>float与overflow</title>

    <style>

        body{

            margin: 0px;

            padding:0px;

        }

        div{

            width:150px;

            border:1px solid black;

            overflow: hidden;

        }

        div div{

            border:1px solid red;

            background-color:#fdedd2;

            float:right;

            width:50px;

            height:50px;

        }

        p{

            margin: 0px;

            padding: 0px;

            border: 1px solid red;

            width: 50px;

            height: 50px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div>

        <p>p</p>

        <div>1</div>

        <div>2</div>

    </div>

</body>

</html>

overflow 在float浮动标签里的作用的更多相关文章

  1. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  2. float浮动引起的ul高度崩溃与overflow的关系

        今天遇到的问题真的让人不得不吐槽,因为一个很小的问题,花费了半天的时间来才解决这个问题.一直认为自己对Html与Css了解应该算蛮不错的,但是今天遇到的事情让我不得不反省自己的学习心态上的错误 ...

  3. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  4. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  5. CSS清除float浮动

    一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...

  6. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  7. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

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

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

  9. 第九篇 float浮动

    float浮动   首先老师要声明,浮动这一块,和边距.定位相比,它是比较难的,但是用它,页面排版会更好.   这节课就直接上代码,看着代码去学浮动. 我们先弄一个div,给它一个背景颜色: HTML ...

随机推荐

  1. 学Android开发的人可以去的几个网站

    学Android开发的人可以去的几个网站 1.<IT蓝豹>Android开源项目分享平台国内非常好的一个Android开发者分享站,分享android所有特效,每天都有最新的Android ...

  2. 吴裕雄 python神经网络（7）

    import numpy as npnp.random.randint(0,49,3) # -*- coding:utf-8 -*-import kerasfrom keras.models impo ...

  3. python基础学习Day12 生成器、列表推导式、字典的表达式、字典键值对的互换、集合推导式

    一.生成器 1.1 生成器:就是(python)自己用代码写的迭代器,生成器的本质就是迭代器. 1.2 生成器函数 def func1(x): x += print() yield x print() ...

  4. CAP与Base理论

    分布一致性的提出 在分布式系统中要解决的一个重要问题就是数据的复制.在我们的日常开发经验中,相信很多开发人员都遇到过这样的问题:假设客户端C1将系统中的一个值K由V1更新为V2,但客户端C2无法立即读 ...

  5. 使用openshit在ubuntu14.04下一键部署openstack(juno版本)

    一.基本介绍 本实验是在vmware workstation上虚拟机ubuntu14.04(64bit,desktop)上部署openstack(Juno版本).采用的工具是openshit.open ...

  6. 物料没加DUMMY

    会加入DUMMY的表 IN_ITEM,IN_ITEM_SITE,IN_SALES_ORDER 加入DUMMY的存储过程名为SAP_MATERIAL_SO. FP_CHANGE_MO_ROUTING的第 ...

  7. Myeclipse 2014 破解

    Myeclipse 2014 破解补丁,首先需要先下载 Myeclipse 2014 官方安装文件,下载地址http://www.jb51.net/softs/150886.html,然后下载此补丁. ...

  8. 【翻译】View Frustum Culling --2 Geometric Approach – Extracting the Planes

    在上一篇中,我们知道了视锥体的形状,并且也确定了我们进行裁剪时的步骤.那我们接下来要走的就是确定视锥体的六个平面: near, far, top, bottom, left and right 2.计 ...

  9. TCP的状态转移

    状态转移图 状态分析 客户端 CLOSED 初始状态 调用connect将发起主动打开,发送SYN J到服务端,进入SYN_SENT状态. SYN_SENT 客户端已经发送SYN报文 接收到服务端发回 ...

  10. vue生命周期简介

    vue生命周期简介 生命周期的钩子 LifeCycle hooks 上面已经能够清晰的看到vue2.0都包含了哪些生命周期的钩子函数~~ 那么 执行顺序以及什么时候执行,我们上代码来看~~~ 生命周期 ...