<!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. 移动端 input样式在安卓与ios上不同的解决方案

    input{ -webkit-appearance:none; }

  2. SqlServer-RBAC五表权限

    这只是一个精简的SqlServer-RBAC五表权限,根据自身需求修改即可 --创建数据库-权限CREATE DATABASE RBACGOUSE RBACGO --1.权限表CREATE TABLE ...

  3. OpenSSL 正确安装

    经过几天的各种尝试,总算正常安装了openssl,中途差点各种放弃,最后总算装好了. 环境:Win10 , 为了装OpenSSL 而安装了vs2010,没有验证必须要装的 安装步骤: .从openss ...

  4. Echarts在手机端y轴数据过大，显示不全

    解决办法: 减少y轴的margion,和格式化y轴 myChart.setOption({ ..., yAxis: { axisLabel: { margin: , formatter: functi ...

  5. c/c++ 右值引用

    c/c++ 右值引用 转自:https://www.cnblogs.com/catch/p/3500678.html 左值(lvalue)和右值(rvalue)是 c/c++ 中一个比较晦涩基础的概念 ...

  6. GitHub-分支管理02-BUG与Feature分支

    参考博文:廖雪峰Git教程 1. Bug分支 软件开发中,bug就像家常便饭一样.有了bug就需要修复,在Git中,由于分支是如此的强大,所以,每个bug都可以通过一个新的临时分支来修复,修复后,合并 ...

  7. 解决终端SSH连接服务器一段时间不操作之后卡死的问题

    卡死是因为LIUNX安全设置问题,在一段时间内没有使用数据的情况下会自动断开,解决方法就是让本地或者服务器隔一段时间发送一个请求给对方即可 在本地打开配置文件(不建议在server端设置) sudo ...

  8. java实现支付宝支付及退款（一）

    本篇博客主要做支付宝支付的准备工作(注册沙箱.natapp内网穿透等操作).具体代码实现操作请看下篇博客 一.登录沙箱 1．登录蚂蚁金服开发平台: https://open.alipay.com/pl ...

  9. 《Java大学教程》--第3章 迭代

    迭代(iteration).重复(repetition):三种循环* for: 重复执行固定次数* while: 重复执行不固定次数* do...while: 比while至少多一次 1.答:P47迭 ...

  10. Linux：自动删除n天前日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...