<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>70-清除浮动方式五</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        /*

        div{

            width: 100px;

            height: 100px;

            background-color: red;

            overflow: hidden;

        }

        */

        /*

        .box1{

            background-color: red;

            overflow: hidden;

            *zoom:1;

        }

        .box2{

            background-color: green;

        }

        .box1 p{

            width: 100px;

            background-color: blue;

        }

        .box2 p{

            width: 100px;

            background-color: yellow;

        }

        p{

            float: left;

        }

        */

        .box1{

            width: 200px;

            height: 200px;

            background-color: red;

            /*border: 1px solid #000;*/

            overflow: hidden;

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: blue;

            margin-top: 20px;

        }

    </style>

</head>

<body>

<!--

1.overflow: hidden;作用

1.1可以将超出标签范围的内容裁剪掉

1.2清除浮动

1.3可以通过overflow: hidden;让里面的盒子设置margin-top之后, 外面的盒子不被顶下来

-->

<!--

<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

-->

<!--

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字1</p>

    <p>我是文字1</p>

</div>

<div class="box2">

    <p>我是文字2</p>

    <p>我是文字2</p>

    <p>我是文字2</p>

</div>

-->

<div class="box1">

    <div class="box2"></div>

</div>

</body>

</html>

H5 70-清除浮动方式五的更多相关文章

  1. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  2. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  3. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  4. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

  5. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  6. H5 69-清除浮动方式四

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. H5 67-清除浮动方式三

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. H5 66-清除浮动方式二

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. H5 65-清除浮动方式一

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. SQL Server Alert发送告警邮件少了的原因

    最近突然发现我们部署在数据库上面的告警(Alert),当错误日志里面出现错误时,并不是每个错误日志都会发送邮件出来.如下所示,设置了告警"SQL Server Severity Event ...

  2. C#核心基础--类的继承

    继承 一个类可以继承自另一个类.在 C#中,类与类之间只存在单一继承.也就是说,一个类的直接基类只能有一个.当类与类之间实现继承的时候,子类可以将它的直接基类的所有成员当做自己的成员,除了类的静态构造 ...

  3. Django之--MVC的Model

    在上一篇:Django之--通过MVC架构的html模板展示Hello World! 讲述了基本的MVC模型,但是却并没有测试Model的作用,本文通过mysql数据库来测试. Django自带的mo ...

  4. AFURLSessionManager 上传下载使用

    1.下载 Creating a Download Task NSURLSessionConfiguration *configuration = [NSURLSessionConfiguration ...

  5. Powershell批量安装SNMP服务

    我要给node5-8的节点都安装snmp服务 如果不知道要安装的服务的名字,用get-windowsfeature 能显示出来所有的名字 Invoke-Command -ComputerName no ...

  6. [Hive_add_10] Hive 的 serde (序列化 & 反序列化) 操作

    0. 说明 serde 是序列化和反序列化 serialize & deserialize 是将文件中的字段映射成 Hive 中的列 1. 验证 1.1 openCSVSerde CSV 为逗 ...

  7. 排序算法之冒泡排序的思想以及Java实现

    1 基本思想 设排序表长为n,从后向前或者从前向后两两比较相邻元素的值,如果两者的相对次序不对(A[i-1] > A[i]),则交换它们,其结果是将最小的元素交换到待排序序列的第一个位置,我们称 ...

  8. ASP.NET -- WebForm -- HttpRequest类的方法和属性

    ASP.NET -- WebForm --  HttpRequest类的方法和属性 1. HttpRequest类的方法(1) BinaryRead: 执行对当前输入流进行指定字节数的二进制读取. ( ...

  9. 简单的bfs

    这里主要是写的一个简单的bfs,实例运行了RMAT10无向图,总共有1024个顶点.这种简单的bfs算法存在很明显的缺陷,那就是如果图数据过大,那么进程将会直接被系统杀死. 代码如下: #includ ...

  10. June 2. 2018 Week 22nd Saturday

    Try not to become a man of success but rather try to become a man of value. 不要为成功而努力,要为做一个有价值的人而努力. ...