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. Delphi在Listview中加入Edit控件

    原帖 : http://www.cnblogs.com/hssbsw/archive/2012/06/03/2533092.html Listview是一个非常有用的控件,我们常常将大量的数据(如数据 ...

  2. 29.Spring-基础.md

    目录 1.目的和作用 [toc] 2.概念 2.1框架的设计 2.2控制反转 2.3AOP [toc] 3. 3.1Spring六大模块 [toc] 1.目的和作用 解决对象的创建和以及对象依赖关系的 ...

  3. Javascript中的this之我见

    来源:http://www.blogjava.net/baoyaer/articles/105864.html 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都 ...

  4. spring boot 集成Thymeleaf

                                           

  5. vue组件知识点

    1.组件的定义 const component = { props: { //外部父组件约束子组件的 里面不要修改 可以通过触发事件来修改 active: Boolean, propOne: Stri ...

  6. 安装beanstalkd

    运行下面命令安装: yum install epel-releaseyum -y install beanstalkd --enablerepo=epel

  7. java.net.UnknownHostException: www.terracotta.org

    异常日志: java.net.UnknownHostException: www.terracotta.org at java.net.PlainSocketImpl.connect(PlainSoc ...

  8. phpunit 生成三种日志文件的配置方法

    #目录结构 windows bin目录下 ├── phpunit.phar ├── phpunit.cmd ├── phpunit.xml ├── build.xml ├── ArrTest.php ...

  9. IDEA中配置Maven+spring MVC+tomcat

    一:配置Maven安装教程如下: http://blog.csdn.net/qq_32588349/article/details/51461182 实际安装过程中,如果按照教程配置如下属性,最后创建 ...

  10. 一个范围的两个数进行数位的累加，实现对两个数num1和num2的数位和相加

    对一个范围的两个数进行数位的累加,例如有两个数 15,19则 他们的数位和应该为: 1+5+1+6+1+7+1+8+1+9,结果为40. 测试说明 样例1 输入:1519 输出: 40 以下是不同方法 ...