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. [CI]CodeIgniter系统流程

    ---------------------------------------------------------------------------------------------------- ...

  2. kickstart自动安装部署RHEL7

    Kickstart是一种无人值守的安装方式.它的工作原理是在安装过程中记录典型的需要人工干预填写的各种参数,并生成一个 名为ks.cfg的文件.如果在安装过程中(不只局限于生成Kickstart安装文 ...

  3. unity 2048Game

    将游戏分为四个脚本,将数据和界面分开,这是开发模式常用的类似于mvc模式,但由于我们只用一个二位数组就可以保存数据,所以讲m省略 GameControllor 控制游戏数据的脚本, using Uni ...

  4. svn转git

    在Git Bash 中输入 git-svn clone http://devsvnread.uuzuonline.net/GOT_PRIVATE/server/ --no-metadata -T tr ...

  5. css flex 兼容ios android--商品展示 添加购物车

    https://blog.csdn.net/u010035608/article/details/52711248 <!DOCTYPE html> <html> <hea ...

  6. 05_ssm基础(六)之SpringMVC

    36.springMVC之入门 1.springMVC简介 Spring MVC是基于MVC模式的一个Web框架,它解决WEB开发中常见的问题(参数接收.文件上传.表单验证.国际化.等等),而且使用简 ...

  7. 03_java基础（三）之第一个程序与开发工具的安装

    1.第一个Java程序 ① 找一个特定的放代码的地方    ② 新建一个文本文档 --> 改名 Hello.java        注意 : 必须先把文件的后缀名都显示出来     不同的操作系 ...

  8. QPS/TPS/并发量/系统吞吐量的概念

    我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.这个问题从业务上来讲,可以理解为应用系统每秒钟最大能接受的用户访问量.或者每秒钟最大能处理的请求数: QPS ...

  9. Mybatis多个in查询

    Map<String, Object> params = null; List<Map<String, Object>> list=new ArrayList(); ...

  10. MQ中间件死信队列深度不断增加问题解决案例

    感谢作者: http://www.wo81.com/tec/mid/mq/2014-04-14/94.html  MQ中间件死信队列深度不断增加问题解决案例 ❞ ☜ ☞ 作者:彭新 日期:2014-0 ...