<!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. mssql sqlserver 获取指定日期为本月第几个工作日

    转自:http://www.maomao365.com/?p=6771 摘要: 下文讲述工作中,需要获取指定日期在当月的工作日 下文讲述常规的指定工作日所在月的天数分析,实现思路:1 生成一个国家法定 ...

  2. Mysql的NULL和Empty String

    本文基于Mysql5.7版本的参考资料: https://dev.mysql.com/doc/refman/5.7/en/working-with-null.html https://dev.mysq ...

  3. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  4. postgresql 按日期范围查询

    Timestamp without timezone 方法一: select * from user_info where create_date >= '2015-07-01' and cre ...

  5. 面试总结——Java篇

    前言:前期对Java基础的相关知识点进行了总结,具体参看:Java基础和面试知识点.近期由于笔者正在换工作(ing),因此下面将笔者在面试过程中或笔者朋友面试过程中反馈的题目进行总结,相信弄清楚下面题 ...

  6. Java面试知识点之线程篇（一）

    前言:在Java面试中,一定会遇到线程相关问题,因此笔者在这里总结Java中有关线程方面知识点,多数从网上得来(文中会贴出主要参考链接),有些也是笔者在面试中所遇到的问题,如有错误,请不吝指正.主要参 ...

  7. form表单post请求乱码问题

    今天做一个查询的小模块遇到了 请求乱码的问题,表单请求方式是post 解决方法是在web.xml 文件中配置一下内容 <!--配置解决post乱码问题filter --> <filt ...

  8. An Introduction To The SQLite C/C++ Interface

    1. Summary The following two objects and eight methods comprise the essential elements of the SQLite ...

  9. UVA12188-Inspector's Dilemma(欧拉回路+连通性判断)

    Problem UVA12188-Inspector's Dilemma Time Limit: 3000 mSec Problem Description In a country, there a ...

  10. 如何在关闭ssh连接的情况下，让进程继续运行？

    #screen 1 回车后进入Screen子界面,此时putty标题栏会指示处于子界面状态,然后运行你的程序 #应用程序名 1 然后按下Ctrl+A后抬起,然后按下d键,此时切换回主界面,Putty的 ...