<!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. python datetime object 去除毫秒(microsecond)

    >>>import datetime >>>d = datetime.datetime.now().replace(microsecond=0) >>& ...

  2. EXT.NET初学

    1.ext:Hidden 必须在body里面有ext:ResourceManager的情况下才能运行 2.ext:Store里面不能有文字

  3. DBUtils温习2

    上篇简单回顾了下DBUtils的简介和其常用的类,这篇博客结合C3P0连接池,做一个简单的增删改查操作 1.创建web项目,导入jar包 2.编写c3p0-config.xml和引入工具类 <? ...

  4. centos7下安装docker（18docker日志---docker logs）

    在微服务架构中,由于容器的数量众多以及快速变化的特性使得记录日志和监控变得越来越重要,考虑到容器的短暂和不固定周期,当我们需要排查问题的时候容器可能不在了.因此,一套集中式的日志管理系统是生产环境中不 ...

  5. 启动PHP study时提示80端口或者3306端口被占用的解决办法

    一.查看PID WIN+R打开命令行------>netstat -ano+回车,就会显示下面的信息: 二.打开任务管理器 Ctrl+Alt+Delete------>任务管理器,找到对应 ...

  6. skip-thought vector 实现Sentence2vector

    1.常见文本相似度计算方法 常见的短文本相似度计算方法目前有很多中,但这些短文本相似度计算方法都只是提取了短文本中的浅层特征,而无法提取短文本中的深层特征.目前常见的文本相似度计算方法有: 1)简单共 ...

  7. Asp.net Web Api开发Help Page配置和扩展

    为了方面APP开发人员,服务端的接口都应当提供详尽的API说明.但每次有修改,既要维护代码,又要维护文档,一旦开发进度紧张,很容易导致代码与文档不一致. Web API有一个Help Page插件,可 ...

  8. Spark排序与去重遇见的问题

    答案: Spark的distinct是通过聚集去重的,可以简单理解为group by去重: 代码1:是先去重之后再排序取limit20是正确的, 代码2:是先排序之后再到各个节点进行去重之后再limi ...

  9. java和maven环境变量设置，Tomcat部署

    Java环境变量设置 Win10我的电脑右击属性,高级系统设置,高级,环境变量设置 新建系统变量JAVA_HOME 和CLASSPATH  变量名:JAVA_HOME 变量值:C:\Program F ...

  10. 3.if结构

    一.简单if结构1.定义:程序的条件判断2.语法:if(条件){ 语句块1}else{ 语句块2}语句块33:说明:条件必须是条件表达式,其结果必须是一个boolean类型 else是可选项,可以不写 ...