<!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. setfont()函数

    设计字体显示效果 Font mf = new Font(String 字体,int 风格,int 字号); 字体:TimesRoman, Courier, Arial等 风格:三个常量 lFont.P ...

  2. 【MM系列】SAP里批量设置采购信息记录删除标记

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP里批量设置采购信息记录删除标记 ...

  3. Android 闪烁动画

    import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animatio ...

  4. vim 基础命令大全

         VIM命令大全 光标控制命令 命令                   光标移动h                   向左移一个字符j                   向下移一行k  ...

  5. Jenkins的构建编号和一个有趣的bug

    什么是构建编号 jenkins每个job的每一次构建都有一个属于自己独立的构建编号,每一次的构建结果(成功或失败)所使用的编号都是不相同的. 正确的构建编号:每个job的每次构建结果使用不相同的构建编 ...

  6. Yii2.0手册地址

    官网打不开,可以看这里 http://yii2.techbrood.com/   ;跟官网里面文档一样.ps:今天真郁闷,官网都打不开

  7. MySQL注入与防御

    1.简介 1.1.含义 在一个应用中,数据的安全无疑是最重要的.数据的最终归宿都是数据库,因此如何保证数据库不被恶意攻击者入侵是一项重要且严肃的问题! SQL注入作为一种很流行的攻击手段,一直以来都受 ...

  8. FAT32格式和NTFS格式区别

    NTFS(Windows):支持最大分区2TB,最大文件2TB: FAT16(Windows):支持最大分区2GB,最大文件2GB: FAT32(Windows):支持最大分区128GB,最大文件4G ...

  9. 【Teradata】配置PE和AMP（congfig和reconfig工具、vprocmanager）

    The Reconfiguration and Configuration utilities are used to define the AMPs and PEs that operate tog ...

  10. 更高的压缩比，更好的性能–使用ORC文件格式优化Hive

    http://lxw1234.com/archives/2016/04/630.htm 关键字:orc.index.hive Hive从0.11版本开始提供了ORC的文件格式,ORC文件不仅仅是一种列 ...