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. ArcGIS（ESRI）的发展历史和版本历史（简介）

    作者:fenghuayoushi 来源:CSDN 原文:https://blog.csdn.net/fenghuayoushi/article/details/6677360   ESRI公司介绍   ...

  2. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  3. mysql游标错误

    DECLARE done INTEGER DEFAULT 0;DECLARE cur CURSOR FOR SELECT f_time,f_value FROM this_yc201508;DECLA ...

  4. winform中datagridview刷新后的排序记忆

    datagridview先点标题排序,但是重新刷新之后,还是变成窗体加载后的样子 我这里用定时器刷新的. 1.先定义三个全局变量 /// <summary> /// 需要排序的列和方向 / ...

  5. C++ 关于 CMFCPropertyGridCtrl 的使用方法 之一 (原创)

    题外话: 最近在写一个重要的程序,想做的更灵活一些,于是想采用属于对话框的形式,如图所示 但查了好几本大部门的C++及MFC的书,还有很多的网上的资料,这方面的介绍实在是少之又少.不过,好在VS201 ...

  6. hdu5391-Zball in Tina Town-威尔逊定理(假证明)

    Tina Town is a friendly place. People there care about each other. Tina has a ball called zball. Zba ...

  7. jquery.cookie介绍和用法

    1.依赖jQuery库 2.浏览器兼容性情况 3.下载 官方github:https://github.com/carhartl/jquery-cookie 4.使用 创建一个整站cookie $.c ...

  8. SpringMVC Controller 单例 多例

    对于SpringMVC 的Controller单例还是多例.下面举例说明:第一次:类是多例,类里包含一个普通属性,一个静态属性 结果:普通属性:0.............静态属性:0 普通属性:0. ...

  9. 1、CDH 搭建Hadoop在安装之前(存储空间规划)

    Cloudera Manager的存储空间规划 最低要求角色: 完全管理员 Cloudera Manager跟踪许多后台进程中的服务,作业和应用程序的度量标准.所有这些指标都需要存储.根据组织的大小, ...

  10. jvisual中添加jstatd远程监控

    visualVM远程监控: jvisual中需要增加插件安装. 在执行Java 应用程序的服务器上先生成一个jstatd.all.policy grant codebase "file:${ ...