<!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. JavaScript中解决计算精度丢失的问题

    在做项目之前老师就给我们封装好了一个js文件,解决计算中丢失精度的一些函数,直接引用js文件就可以使用. eg: var numA = 0.1; var numB = 0.2; alert( numA ...

  2. EOS与以太坊有哪些区别？

    以太坊是一个专门为开发和运行去中心化应用(DAPP)搭建的智能合约平台:EOS与以太坊类似,同样是基于智能合约和区块链而搭建.但是,从技术和设计理念等方面来看,这两者之间实际上存在明显的区别. 那么E ...

  3. Linux CFS调度器之虚拟时钟vruntime与调度延迟--Linux进程的管理与调度(二十六）

    1 虚拟运行时间(今日内容提醒) 1.1 虚拟运行时间的引入 CFS为了实现公平,必须惩罚当前正在运行的进程,以使那些正在等待的进程下次被调度. 具体实现时,CFS通过每个进程的虚拟运行时间(vrun ...

  4. UITableView的分割线长短的控制

    UITableView的默认的cell的分割线左边没有顶满,而右边却顶满了.这样显示很难看.我需要让其左右两边都是未顶满状态,距离是20像素 // code1 if ([self.tableView ...

  5. ugui SetParent在安卓上一个诡异bug

    问题描述 我的环境:Unity3D 5.3.7 出问题机型:安卓模拟器.部分低配安卓机型(比如:红米2A) 以下代码是设置某个节点的父节点,在PC.Editor.大部分手机上都是正常的,但问题机型上, ...

  6. 二、selenium 安装

    selenium的安装所需要的环境: 1.浏览器的安装Firefox 2.JDK的安装(Java开发基础类库)eclipse 一个开发源代码的工具 3.selenium sever 下载.网络状况监视 ...

  7. VMware虚拟机安装CentOS7【转】-添加部分注释（自己看着方便）

    本文稍作改动,添加部分说明,原文链接:https://www.cnblogs.com/wcwen1990/p/7630545.html 本文基于vmware workstations进行CentOS7 ...

  8. python——虚拟环境之virtualenvwrapper-win（windows10,64位）

    1 问题描述 当M个项目需要N个版本的python环境配置时(M>N)时,我们没有必要对每个项目都创建一个虚拟环境,只需要创建N个虚拟环境即可.这样节省了大量存储空间(特别是当M远大于N时).但 ...

  9. C# -- 内插字符串的使用

    C# -- 内插字符串的使用 (1) 字符串文本以 $ 字符开头,后接左双引号字符. $ 符号和引号字符之间不能有空格.(2) 内插字符串表达式的结果可以是任何数据类型.(3) 可通过在内插表达式后接 ...

  10. Linux 小知识翻译 - 「动态DNS」（DDNS）

    这次聊聊「动态DNS」. DNS上周已经介绍过了,就是提供主机名和IP地址对应关系的结构.「动态DNS」是对主机名和IP地址的对应关系提供动态管理的结构. 以前的DNS没有考虑IP地址变化的情况.但是 ...