<!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. Spring（mvc）思维导图

    spring mvc简介与运行原理 Spring的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器,并支持可配置的处理器 ...

  2. spring-AOP（面向切面编程)-xml方式配置

    AOP是针对面向对象编程的一种补充,有时使用面向对象不能很好完成一些额外的功能业务时,可以采用AOP来进行补充. AOP术语: 切面(Aspect) 切面是用于编写切面逻辑的一个类,这个类很类似于JD ...

  3. selenium驱动程序下载和使用流程

    转自https://blog.csdn.net/weixin_42660771/article/details/81286982 1.下载地址    https://github.com/mozill ...

  4. AspNet mvc的一个bug

    [HttpPost] public ActionResult updateLoan(TuWenMilitaryRank entity) 使用mvc绑定表单 每次绑定的对象都为null,查看Reques ...

  5. python字符串处理以及字符串格式化

    一.python字符串处理 目录: 1.算长度(len),某个元素出现的次数(count) 2.切片   [ ],repr:把不可见字符显示出来 3.查找 #find,rfind从右边查找 4.字符串 ...

  6. Vmware ESXi日志文件存放目录地址

    有时候我们需要查看虚拟服务端突然宕机的原因,就需要来查看这些日志 ESXi 通过使用 syslog 功能,在日志文件中记录主机活动. 组件 位置 用途 VMkernel /var/log/vmkern ...

  7. June 3. 2018 Week 23rd Sunday

    You only get one shot; do not miss your chance to blow. 机会只有一次,不要错过. From Eminem, "Lose Yoursel ...

  8. Angular 开发小妙招1：提交表单数据验证不通过，更改输入组件的样式

    开发表单时,客户端数据完整性校验是必不可少的,在jquery 时代出现了无数的数据验证插件也很好用,开发Angular 应用时,angular 内置了一些常用的数据验证指令.今天要讲的不是这些指令如何 ...

  9. （转）Spring Boot (十五)： Spring Boot + Jpa + Thymeleaf 增删改查示例

    http://www.ityouknow.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html 这篇文章介绍如何使用 Jpa 和 ...

  10. nginx学习笔记（二）

    tail -f /var/log/nginx/access.log 查看nginx访问日志 安装ab压测工具 连接限制只有公有云才能测出,虚拟机只能测请求限制 添加用户 覆盖用户 新增用户 文件是配置 ...