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. Python类的进阶.md

    属性绑定 在python中可以给类对象动态的绑定属性 但是由于这种特性,随意动态绑定也会带来麻烦,因此可用__slots__来限制可绑定的属性名称 __slots__的绑定对于子类是不生效的,只对当前 ...

  2. VC++ MFC如何生成一个可串行化的类

    一.MFC允许对象在程序运行的整个过程中持久化的串行化机制(1)串行化是指向持久化存储媒介(如一个磁盘文件)读或写对象的过程.(2)串行化用于在程序运行过程时或之后修复结构化数据(如C++类或结构)的 ...

  3. 解决idea控制台乱码及项目乱码

    如果控制台出现乱码,解决办法: 第1方案:.找到安装idea的路径下找idea文件下的bin中vmoptions文件,打开该文件,加上-Dfile.encoding=UTF-8 第二方案: 第3种方案 ...

  4. Linux安装face_recgnition

    Ubuntu 3:apt-get install python3.6-dev 4:pip3 install face_recgnition 5:  pip3 install opencv-python ...

  5. 内核进程切换 switch_to

    参考: http://www.cnblogs.com/visayafan/archive/2011/12/10/2283660.html

  6. dropload插件的使用（上拉下滑加载数据）

    .导入 js dropload.min. js zepto.min.js  <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 --> $(function(){ ...

  7. python 函数的动态参数 命名空间,作用域以及函数嵌套,global和nonlocal (重点)

    *** 坚持坚持,即使你不太强*** 1.函数的动态传参 2.函数的命名空间及作用域 3.函数嵌套 4.global和nonlocal关键字 一.函数的动态传参 1. *args: 位置参数动态传参, ...

  8. python生成Excel图表（通过xlsxwriter）

    前面介绍了pandas的简单用法,pandas的数据可以通过matlab第三方包将数据生成报表,但是我想将报表生成在Excel中,这时候就可以借助xlsxwriter第三方包来生成图标   缺点:xl ...

  9. windows 下 wamp php单元测试工具PHPUnit的安装

    phpunit下载网站 http://www.phpunit.cn/ 一.安装PHPUnit 1.选择版本 我用的是php版本是5.6.25 所以我选择的是PHPUnit 5.7 2.安装过程 为 P ...

  10. GsonFormat的使用 (转)

    一.Android Studio快速添加Gson 具体操作:        1.File->Project Structure:   2.app->Dependencies->&qu ...