<!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. mssql sqlserver两条求和sql脚本相加的方法分享

    转自:http://www.maomao365.com/?p=7205 摘要: 下文分享两条sql求和脚本,再次求和的方法分享 /* 例: 下文已知两条sql求和脚本,现需对两张不同表的求和记录再次求 ...

  2. javascript语言之 this概念

    转载 猫猫小屋 http://www.maomao365.com/?p=837 由于javascript是一种解释性语言,运行时才会解释所有的变量值,所以对于javascript中this所指的对象是 ...

  3. python len()函数的用法

    函数:len() 返回字符串.列表.字典.元组等长度. 语法:len(str) str:要计算的字符串.列表.字典.元组等 返回值:字符串.列表.字典.元组等元素的长度. Test: 1:计算字符串的 ...

  4. postgresql自定义类型并返回数组

    转自 https://blog.csdn.net/victor_ww/article/details/44415895 create type custom_data_type as ( id int ...

  5. 我在 Mac 上都用什么

    我在 Mac 上都用什么 Homebrew Homebrew 是统一管理 macOS 中应用的最佳方法之一,而且大量优秀的应用都可以在 Homebrew 中找到. 就不做过多介绍了, 有兴趣可以看相关 ...

  6. 排序算法之冒泡排序的思想以及Java实现

    1 基本思想 设排序表长为n,从后向前或者从前向后两两比较相邻元素的值,如果两者的相对次序不对(A[i-1] > A[i]),则交换它们,其结果是将最小的元素交换到待排序序列的第一个位置,我们称 ...

  7. 【PAT】B1004 成绩排名

    简单题 循环输入放入结构体数组,一个sort搞定 #include <stdio.h> #include<algorithm> using namespace std; str ...

  8. LeetCode算法题-Intersection of Two Linked Lists（Java实现）

    这是悦乐书的第178次更新,第180篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第37题(顺位题号是160).编写程序以找到两个单链表交叉的节点.例如: 以下两个链表: ...

  9. spring cloud 实践之hystrix注意事项

    当我们写类似下面代码时 package demo1.demo1; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org ...

  10. Java程序导出成.jar文件、生成.exe可执行文件及打包成可执行安装程序（可在无Java环境的计算机上运行）--以个人所得税计算器为例

    Java程序导出成.jar文件.生成.exe可执行文件及打包成可执行安装程序 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 需要准备的软件: jdk, ...