<!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. C#-异常处理（十四）

    概念 异常处理是指程序在运行过程中,发生错误会导致程序退出,这种错误,就叫做异常 但并不是所有的错误都是异常 而处理这种错误,称为异常处理 异常处理实际是不断去发掘异常.修改异常,使程序更稳定 异常处 ...

  2. 自动化测试基础篇--Selenium中JS处理浏览器弹窗

    摘自https://www.cnblogs.com/sanzangTst/p/7692454.html 浏览器弹窗: 现在大多数网站都会使用自定义弹窗,使用Selenium自带的方法暂时处理不了,这时 ...

  3. Linux内存描述之概述--Linux内存管理(一)

    1 前景回顾 1.1 UMA和NUMA两种模型 共享存储型多处理机有两种模型 均匀存储器存取(Uniform-Memory-Access,简称UMA)模型 将可用内存以连续方式组织起来, 非均匀存储器 ...

  4. 1. 路过面了个试就拿到2个offer。是运气吗？

    路过随便面个试就拿到2个offer.是运气吗? #复习很重要#看看面试问的问题,再瞧瞧师兄的学习态度,你就明白 机会为何总与你擦肩而过了.[玫瑰] 以下是我和师兄的聊天记录,你会几个?

  5. A. On The Way to Lucky Plaza 概率 乘法逆元

    A. On The Way to Lucky Plaza time limit per test 1.0 s memory limit per test 256 MB input standard i ...

  6. CSS--块级元素和行内元素

    相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...

  7. 使用dd备份和恢复ASM中的数据文件头

    这里用大家随处可见的(除了extent分布的x$kffxp需要百度和google外),其余都是文档中有详细记载的常用ASM视图来实现同样功能: 下面的用于从ASM中备份数据文件头: SQL> s ...

  8. No.0

    算法类 1.快速排序算法 2.树的非递归后序排序算法 3.希尔排序 4.冒泡排序 5.链表和链表转向 6.其他   设计模式 1.单例模式 2.工厂模式 3.抽象工厂模式 4.面向对象设计,ooa,o ...

  9. MemCache在.NET中使用Memcached.ClientLibrary详解 转发 https://www.cnblogs.com/li150dan/p/9529112.html

    本文说明:memcached分布式缓存的负载均衡配置比例,数据压缩,socket的详细配置等,以及在.net中的常用方法 首先下载客户端的3个dll,ICSharpCode.SharpZipLib.d ...

  10. jenkins使用4----git maven工具连接

    搭建完git服务器 将jenkins服务器的的公钥传到git服务器的/home/git/.ssh的authorized_keys文件下 ssh端口2994 创建工程 配置完maven发现创建项目没有m ...