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. KVM虚拟化技术（一）虚拟化简介

    一 .虚拟化 虚拟化是指计算机元件在虚拟的基础上而不是真实的基础上运行.虚拟化技术可以扩大硬件的容量,简化软件的重新配置过程.CPU的虚拟化技术可以单CPU模 拟多CPU并行,允许一个平台同时运行多个 ...

  2. 3.Java的基本数据类型.md

    Java支持的类型分为两类: •基本类型(Primitive Type):boolean和数值类型 ◦整型:byte.short.int.long.char ◦浮点:float.double •nul ...

  3. Module build failed: Error: Cannot find module 'url-loader' 的坑

    本文地址:http://www.cnblogs.com/jying/p/8280956.html 开发环境:react.webpack.es5 引用图片报错:Module build failed: ...

  4. google image

    google图片抓取 google图片是base64加密的,而且base64后的信息放在script信息里面 import pymysql from lxml import etree import ...

  5. 学JS的心路历程 - PixiJS -基础（一）

    建立canvas 今天开始我们一步步来看怎么使用PixiJS吧! 在开始之前,要先提醒各位需要先运行webserver,否则将会遇到一些奇怪的问题喔! 最基本的canvas画布是肯定需要的,Pixi提 ...

  6. tensorflow中run和eval的区别（转）

    在tensorflow中,eval和run都是获取当前结点的值的一种方式. 在使用eval时,若有一个 t 是Tensor对象,调用t.eval()相当于调用sess.run(t) 一下两段代码等效: ...

  7. VMwear安装Centos7超详细过程

    本篇文章主要介绍了VMware安装Centos7超详细过程(图文),具有一定的参考价值,感兴趣的小伙伴们可以参考一下 1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:Ce ...

  8. 大数据入门到精通1--大数据环境下的基础文件HDFS 操作

    1.使用hdfs用户或者hadoop用户登录 2.在linux shell下执行命令 hadoop fs -put '本地文件名' hadoop fs - put '/home/hdfs/sample ...

  9. redis做消息列队

    #encoding:utf8 import time import redis conn = redis.Redis('localhost',db=1) #连接诶数据库并使用数据库1 def inse ...

  10. Python图片识别找坐标（appium通过识别图片点击坐标）

    ***如果只想了解图片相似度识别,直接看第一步即可 ***如果想了解appium根据图片识别点击坐标,需要看第一.二.三步   背景|在做UI测试时,发现iOS自定义的UI控件,appium识别不到. ...