<!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的优化器会缓存标量子查询结果集吗

    在这篇博客"ORACLE当中自定义函数性优化浅析"中,我们介绍了通过标量子查询缓存来优化函数性能: 标量子查询缓存(scalar subquery caching)会通过缓存结果减 ...

  2. SQL语句计算距离今天生日还差几天

    转载于:http://www.w3dev.cn/article/20110125/sql-compute-birthdate-now-days.aspx SQL语句计算距离生日还差几天原理很简单,将要 ...

  3. java中 this() 和super()的作用及用法

    原文地址:http://www.cnblogs.com/hasse/p/5023392.html 一.This Java关键字this只能用于方法体中.this只能在类中的非静态方法中使用,静态方法和 ...

  4. win7升级IE11后F12无法正常操作

    今天在win7下把ie9升级为ie11,但是升级后发现ie11的F12无法正常操作,经过查找,发现需要安装win7补丁:KB3008923 下载地址:http://www.microsoft.com/ ...

  5. VS2017 + QT5 + C++开发环境搭建和计算器Demo测试

     非常有帮助的参考资料: https://blog.csdn.net/gaojixu/article/details/82185694 该参考文献的主要流程: (1)QT下载安装:从官网下载QT,并记 ...

  6. 详解PHP中的过滤器（Filter）

    PHP 过滤器用于验证和过滤来自非安全来源的数据,比如用户的输入. 什么是 PHP 过滤器? PHP 过滤器用于验证和过滤来自非安全来源的数据. 验证和过滤用户输入或自定义数据是任何 Web 应用程序 ...

  7. Mysql的用户管理

  8. 如何设计一个"好的"测试用例？

    什么才算是“好的”测试用例? 好的测试用例一定是一个完备的集合,它能够覆盖所有等价类以及各种边界值,而跟能否发现缺陷无关. "好的"测试用例必须具备哪些特征? 一个“好的”测试用例 ...

  9. django ORM的总结

    1.django分表的方案:   https://mp.weixin.qq.com/s?__biz=MjM5NjA3Nzk3Ng==&mid=2648154502&idx=1& ...

  10. @RequestParam 和@RequestBody 的区别?

    @RequestParam用来接收: 1 用来处理简单的参数绑定 2 用来接收 Content-Type 是   application/x-www-form-urlencoded (这种格 式的数据 ...