<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>66-清除浮动方式二</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            border: 1px solid #000;

        }

        .box1{

            background-color: red;

        }

        .box2{

            background-color: green;

            clear: both;

            margin-top: 28px;

        }

        .box1 p{

            width: 100px;

            background-color: blue;

        }

        .box2 p{

            width: 100px;

            background-color: yellow;

        }

        p{

            float: left;

        }

        /*

        .dd{

            width: 500px;

            height: 500px;

            background-color: red;

            border: 1px solid #000;

        }

        .ddd{

            width: 200px;

            height: 200px;

            background-color: blue;

            margin-top: 100px;

        }

        */

    </style>

</head>

<body>

<!--

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

给后面的盒子添加clear属性

clear属性取值:

none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)

left: 不要找前面的左浮动元素

right: 不要找前面的右浮动元素

both: 不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效

-->

<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="dd">

    <div class="ddd"></div>

</div>

-->

</body>

</html>

H5 66-清除浮动方式二的更多相关文章

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

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

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

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

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

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

  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 65-清除浮动方式一

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

  9. css清除浮动方式总结

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

随机推荐

  1. ZooKeeper使用命令大全

    stat path [watch]    set path data [version]    ls path [watch]    delquota [-n|-b] path    ls2 path ...

  2. OpenSSL 正确安装

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

  3. c/c++ const关键字

    const 在星号的右边:不可以改指针的指向,可以用指针改里面的值 int * const p; const在星号的左边:可以改指针的指向,不可以用指针改里面的值 int const *p; cons ...

  4. IIS 部署问题 404

    在部署IIS环境中,偶尔会遇到 404 错误,就算以前遇到过,也因为时间久了导致大概知道是什么错了,具体解决方案觉忘了,所以留下一个记录,留给自己,也是给大家一点提醒.(注:错误信息也懒得截图了,希望 ...

  5. LeetCode算法题-Pascal's Triangle II（Java实现）

    这是悦乐书的第171次更新,第173篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第30题(顺位题号是119).给定非负索引k,其中k≤33,返回Pascal三角形的第k ...

  6. 力扣算法题—051N皇后问题

    #include "000库函数.h" //使用回溯法来计算 //经典解法为回溯递归,一层一层的向下扫描,需要用到一个pos数组, //其中pos[i]表示第i行皇后的位置,初始化 ...

  7. 用栈来实现队列的golang实现

    使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返回队列首部的元素. empty() -- 返回队列是否为空. ...

  8. Python编码问题小结

    开门见山 decode的作用是将其他编码的字符串转换成Unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换成Unicode编码. encode的 ...

  9. docker学习笔记（一）-vagrant/docker machine安装docker，阿里云通过docker machine安装docker

    首先需要先安装virtualbox https://www.vagrantup.com/ 下载安装vagrant 安装完毕后通过vagrant下载镜像,生成实例 mkdir test_centos7 ...

  10. nosql：文件存储和sql数据库存储形式之外的存储系统都是nosql

    为了设计一个比较好的磁盘缓存,我调查了大量的开源库,包括 TMDiskCache.PINDiskCache.SDWebImage.FastImageCache 等,也调查了一些闭源的实现,包括 NSU ...