<!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. shell编程-输出（六）

    echo输出echo指令用于字符串的输出 格式:echo 字符串 直接输出字符串:string echo 'this is string-output' 用双引号,这儿也可以省略引号 转义字符:\ e ...

  2. ASP.NET Core 1.0、ASP.NET MVC Core 1.0和Entity Framework Core 1.0

    ASP.NET 5.0 将改名为 ASP.NET Core 1.0 ASP.NET MVC 6  将改名为 ASP.NET MVC Core 1.0 Entity Framework 7.0    将 ...

  3. 修改主机时间对MySQL影响

    背景 在装机实施时,BIOS忘记调整时间,导致服务器时间与CST不符合:待发现问题时,MySQL环境已经在运行,所以只能通过操作系统进行更改:但是更改完成后,MySQL进行重启时发生了问题.以下为问题 ...

  4. HTTP与TCP的区别和联系

    工作原理(转载): https://www.cnblogs.com/zimohul/p/6506406.html 相信不少初学手机联网开发的朋友都想知道Http与Socket连接究竟有什么区别,希望通 ...

  5. 基于SurfaceView的可拖动视频控件

    视频播放控件(一) 可拖动,变换SurfaceView public class DragSurfaceView extends SurfaceView implements View.OnTouch ...

  6. Tomcat优化配置

    1.环境: 系统:Windows.Linux Tomcat版本:9 2.编码与性能调优 server.xml文件: <Connector port="8080" connec ...

  7. LeetCode算法题-Power Of Three（Java实现-七种解法）

    这是悦乐书的第204次更新,第215篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第71题(顺位题号是326).给定一个整数,写一个函数来确定它是否为3的幂.例如: 输入 ...

  8. #006 C语言大作业学生管理系统第三天

    还差最后两部分 读取文件 恢复删除的学生信息 先学会处理文件的 知识点,再继续跟着视频做这个作业. 应该明天周六能把视频里手把手教的学生管理系统敲完 第二周尽量自己能完成C语言课本最后面那道学生管理系 ...

  9. 【夯实Ruby基础】Ruby快速入门

    本文地址: http://www.cnblogs.com/aiweixiao/p/6664301.html 文档提纲 扫描关注微信公众号 1.Ruby安装 1.1)[安装Ruby] Linux/Uni ...

  10. 为什么二流程序员都喜欢黑php？

    为什么二流程序员都喜欢黑php? 为什么程序员都喜欢黑php?这个嘛!你骂一句php是垃圾试试,保准php程序员不揍扁你!这就好像自己的母校,纵然有很多不好的地方,但是只允许自己调侃,不允许外人骂半句 ...