<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>67-清除浮动方式三</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box1{

            background-color: red;

            /*margin-bottom: 10px;*/

        }

        .box2{

            background-color: green;

            /*margin-top: 10px;*/

        }

        .box1 p{

            width: 100px;

            background-color: blue;

        }

        .box2 p{

            width: 100px;

            background-color: yellow;

        }

        p{

            float: left;

        }

        .wall{

            clear: both;

        }

        .h20{

            height: 20px;

            background-color: skyblue;

        }

    </style>

</head>

<body>

<!--

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

隔墙法

2.外墙法

2.1在两个盒子中间添加一个额外的块级元素

2.2给这个额外添加的块级元素设置clear: both;属性

注意点:

外墙法它可以让第二个盒子使用margin-top属性

外墙法不可以让第一个盒子使用margin-bottom属性

3.内墙法

3.1在第一个盒子中所有子元素最后添加一个额外的块级元素

3.2给这个额外添加的块级元素设置clear: both;属性

注意点:

内墙法它可以让第二个盒子使用margin-top属性

内墙法它可以让第一个盒子使用margin-bottom属性

4.外墙法和内墙法区别?

外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度

5.在企业开发中不常用隔墙法来清除浮动

-->

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字1</p>

    <p>我是文字1</p>

    <div class="wall h20"></div>

</div>

<!--<div class="wall h20"></div>-->

<div class="box2">

    <p>我是文字2</p>

    <p>我是文字2</p>

    <p>我是文字2</p>

</div>

</body>

</html>

H5 67-清除浮动方式三的更多相关文章

  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 66-清除浮动方式二

    <!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. Uvision4创建工程

    创建工程 创建好工程会出现如下的界面 创建文件( .asm 或 .c ) 选择菜单栏中的File->New- 按 Ctrl+S 保存文件并填写文件名 添加到之前创建的工程中 选择Target1- ...

  2. SQL SERVER 查询表的行数

    SELECT OBJECT_NAME(ii.id) TableName ,rows FROM sysindexes ii INNER JOIN sysobjects oo ON ( oo.id = i ...

  3. SQL server 2012 数据库日志缓存过大

    由于我公司的每日数据录入量较多,数据库日志与日俱增,前两天就出现了,因为数据库日志太大导致了 服务器磁盘空间不足,于是我上网查了一下,终于找到了一个数据库日志文件压缩的方法 原文出处:http://b ...

  4. Windows Server 2016-清理残留域控信息

    本章紧接上文,当生产环境中域控出现问题无法修复以后,一方面我们需要考虑抢夺FSMO角色,另一方面我们需要考虑的问题是清理当前域控的残留信息,以防止残留数据信息导致用户验证或者解析异常等问题.本章讲到如 ...

  5. wamp 中安装cakephp Fatal error: You must enable the intl extension to use CakePHP. in XXX

    今天在wamp下安装cakephp3.x的时候,报出这么一条错误:Fatal error: You must enable the intl extension to use CakePHP. in ...

  6. Java的基础知识一

    一.什么是 Java 技术?为何需要 Java? Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台.有许多应用程序和 Web 站点只有在安装 Java 后 ...

  7. CSAPP：第一章计算机系统漫游

    CSAPP:计算机系统漫游 关键点:上下文.程序运行.计算机系统抽象. 信息就是位+上下文一个程序的运行过程系统的硬件组成编译系统是如何工作的?一个程序的运行过程(c语言举例)计算机系统中的抽象 信息 ...

  8. Linux 平台下 RMAN 全备 和 增量备份 shell 脚本

    转:http://blog.csdn.net/tianlesoftware/article/details/5740630 全备脚本 以 nocatalog 模式为例: Shell 脚本: ##### ...

  9. 用户对动态PHP网页访问过程，以及nginx解析php步骤

    www.example.com | Nginx | 路由到www.example.com/index.php | 加载nginx的fast-cgi模块 | fast-cgi监听127.0.0.1:90 ...

  10. 【window】Windows10下为PHP安装redis扩展

    操作: 步骤1:D:\wamp\bin\apache\apache2.4.9\bin/php.ini中添加 ; php_redis extension=php_igbinary.dll extensi ...