<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>65-清除浮动方式一</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box1{

            height: 20px;

            background-color: red;

        }

        .box2{

            background-color: green;

        }

        .box1 p{

            width: 100px;

            background-color: blue;

        }

        .box2 p{

            width: 100px;

            background-color: yellow;

        }

        p{

            float: left;

        }

    </style>

</head>

<body>

<!--

1.清除浮动的第一种方式

给前面一个父元素设置高度

注意点:

在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少

-->

<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>

</body>

</html>

H5 65-清除浮动方式一的更多相关文章

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

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

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

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

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

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

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

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

  5. H5 70-清除浮动方式五

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

  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. css清除浮动方式总结

    1.通过父元素overflow:hidden,缺点:超出部分隐藏,不推荐使用 <!DOCTYPE html> <html lang="en"> <he ...

随机推荐

  1. sqlServer 获取最新的一条数据

    SQL语句获取最新一条的数据 * from tra.dbo.订单 order by 下单时间 desc --时间倒序排列取第一条 select * from tra.dbo.订单 where 下单时间 ...

  2. python第一百零九天---Django 4

    session :1. Session 基于Cookie做用户验证时:敏感信息不适合放在cookie中 a. Session原理 Cookie是保存在用户浏览器端的键值对 Session是保存在服务器 ...

  3. 登录views

    import osimport hashlibfrom django.shortcuts import render,render_to_response,redirect,HttpResponseR ...

  4. Android 模块构建错误不能下载依赖包

    在模块的build.gradle里面添加了 implementation 'com.android.support:design:26.1.0' 构建的时候一直报这个错 Unable to resol ...

  5. Windows Server 2016-管理Active Directory复制任务

    Repadmin.exe可帮助管理员诊断运行Microsoft Windows操作系统的域控制器之间的Active Directory复制问题. Repadmin.exe内置于Windows Serv ...

  6. kali系统固化到固态硬盘小记（赠送给广大折腾党的笔记）

    1.首先你需要一个移动硬盘和一个移动硬盘盒子(一根数据转换线,一般买盒子商家会赠送的) SSD硬盘要事先格式化一下格式,不然识别不出来 2.准备好Kali镜像,传送门在这里https://www.ka ...

  7. MATLAB简易画图2—普通直角坐标系

    MATLAB简易画图2—普通直角坐标系 本人的MATLAB版本为: 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 继续在“MATLAB简易画图”这篇随 ...

  8. sftpdrive mtputty

    https://blog.csdn.net/junli_chen/article/details/77527250?locationNum=2&fps=1

  9. js模块化规范—CMD规范

    CMD规范说明 专门用于浏览器端, 模块的加载是异步的 ,模块使用时才会加载执行,github地址 CMD基本语法 定义暴露模块 //定义有依赖的模块 define(function(require, ...

  10. C# SHA256加密算法记录

    using System.Text; using System.Diagnostics; using System.Security; using System.Security.Cryptograp ...