<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>69-清除浮动方式四</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;

        }

        .box1::after{

            /*设置添加的子元素的内容为空*/

            content: "";

            /*设置添加的子元素为块级元素*/

            display: block;

            /*设置添加的子元素的高度为0*/

            height: 0;

            /*设置添加的子元素看不见*/

            visibility: hidden;

            /*给添加的子元素设置clear: both;*/

            clear: both;

        }

        .box1{

            /*兼容IE6*/

            *zoom:1;

        }

    </style>

</head>

<body>

<!--

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

利用伪元素选择器清除浮动

本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都一样

注意点:

IE6中不支持这种方式, 为了兼容IE6必须给前面的盒子添加*zoom:1;属性

-->

<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>

</body>

</html>

H5 69-清除浮动方式四的更多相关文章

  1. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

  2. 第五篇：web之前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式   前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.flo ...

  3. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  4. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  5. div 清除浮动的四种方法

    概述:为了解决父级元素因为子级内部高度为0的问题 (很多情况 不方便给父级元素高,因为不知道有多少内容,让里面的盒子自动撑起高度),清除浮动本质叫闭合浮动更好一些,清除浮动就是把浮动的盒子关到里面,让 ...

  6. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  7. H5 70-清除浮动方式五

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. H5 67-清除浮动方式三

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. H5 66-清除浮动方式二

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Snapshot origin volumes can be resized only while inactive: try lvchange -an

    事件现象:   最近同事在扩展VG时遇到了"Snapshot origin volumes can be resized only while inactive: try lvchange ...

  2. XtraBackup备份出现"Can't locate Digest/MD5.pm in @INC"

    在CentOS 7上安装了Xtrabackup 2.4.5(innobackupex version 2.4.5 Linux (x86_64) (revision id: e41c0be)),然后做备 ...

  3. 谈谈装xp官方纯净系统屡次失败的深刻体会

    有木有,小硬盘小内存的电脑竟然装不了五六百m大小的xp却能装win7之类的而感到痛失,如果去装win7电脑果断卡死, 用了最流行的制作u盘启动的软件都不行, 任何直接点击安装也不行,点不了安装的那个选 ...

  4. 最简单的java浏览器

    /** * Created by Admin on 2017/3/27. */ import java.awt.BorderLayout; import java.awt.Container; imp ...

  5. python3爬虫抓取智联招聘职位信息代码

    上代码,有问题欢迎留言指出. # -*- coding: utf-8 -*- """ Created on Tue Aug 7 20:41:09 2018 @author ...

  6. CentOS 7.0下解决ifconfig: command not found的方法

    在CentOS7.0中输入ifconfig命令会遇到-bash: ifconfig: command not found. 在CentOS最小安装时是没有附带ifconfig,我们进入sbin目录下可 ...

  7. 将正在运行的Proxmox EV5.x版本更新到最新版本

    问题描述: 最近搭建了一个KVM开源虚拟化平台 Proxmox Virtual Environment是一种基于QEMU / KVM和LXC的开源服务器虚拟化管理解决方案.您可以使用集成的,易于使用的 ...

  8. Windows 下自动同步文件夹内容到另一个文件夹下

    实现windows 使用bat脚本文件,复制文件夹到另一个盘,参考如下代码:/y是可以不显示:提示你需要覆盖一个文件,如下图: bat文件内容为 @echo off echo "使用bat脚 ...

  9. JDBC复习1

    1.什么是JDBC JDBC是java数据库连接技术的简称(Java DataBase Connectivity) jdbc是接口,jdbc驱动才是接口的实现,负责连接各种不同的数据库.jdbc的AP ...

  10. SQL BETWEEN 操作符

    BETWEEN 操作符在 WHERE 子句中使用,作用是选取介于两个值之间的数据范围. BETWEEN 操作符 操作符 BETWEEN ... AND 会选取介于两个值之间的数据范围.这些值可以是数值 ...