<!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. PostgreSQL 表值函数

    方法1create type deptSon as ( mid ), id ), name ), DeptParentId ) ); CREATE OR REPLACE FUNCTION functi ...

  2. cmd是命令提示符吗？

    经常使用电脑的小伙伴对cmd有所了解,它能帮我们快速解决问题.搜索框中输入“cmd”,就可以看到命令提示符程序了.那么,命令提示符程序和cmd到底有着什么样的联系呢?下面就为大家讲解一下. CMD是c ...

  3. C# -- 二分法查找

    二分法查找:适用于已经排序好的数组 1.二分法查找(入门案例) static void Main(string[] args) { , , , , , , , , , , , , , , , , , ...

  4. Kali 2.0 下 Metasploit 初始化配置

    在kali 2.0中,命令行中直接输入msfconsole 提示不能连接到数据库 ,是由于postgresql 未启动.因此,需要开启postgresql,并且进行postgresql 的初始化配置. ...

  5. 【Window Power Shell】介绍与使用

    Windows PowerShell 是专为系统管理员设计的新 Windows 命令行脚本环境,主要实现系统和应用程序管理自动化. 1.发展历史 在2002年,微软开始研究一个新的产品叫做”Monad ...

  6. vue源码分析—模板解析

    福建省啦剑飞傻了剑飞撒到了看风景啊撒:

  7. 【NOI2008】志愿者招募

    [NOI2008]志愿者招募 和[2017山东day7]养猫做法类似. 都是神仙题. 首先我设\(c_{i,j}=[l[j]\leq i\leq r[j]]\) ,于是就可以列出下面的不等式: \[ ...

  8. 「2017 山东一轮集训 Day5」苹果树

    「2017 山东一轮集训 Day5」苹果树 \(n\leq 40\) 折半搜索+矩阵树定理. 没有想到折半搜索. 首先我们先枚举\(k\)个好点,我们让它们一定没有用的.要满足这个条件就要使它只能和坏 ...

  9. 采用BitMap从20亿个int正整数中找出相同的数字

    所谓的BitMap就是用一个bit位来标记某个元素所对应的value,而key即是该元素,由于BitMap使用了bit位来存储数据,因此可以大大节省存储空间. public class Test { ...

  10. 阿里巴巴的26款超神Java开源项目，有时间阅读一下各个文档，增添一下知识广度

    1.分布式应用服务开发的一站式解决方案 Spring Cloud Alibaba Spring Cloud Alibaba 致力于提供分布式应用服务开发的一站式解决方案.此项目包含开发分布式应用服务的 ...