<!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. BurpSuit添加CA证书拦截HTTPS通信

    问题 BurpSuit 安装成功后可以直接使用代理对使用 HTTP 协议通信的会话进行拦截,但是对于使用 HTTPS 协议通信的会话进行代理使用时就会出现如下画面 例如访问百度主页: 原因 HTTPS ...

  2. sql语句中的join用法（可视化解释）

    一.innerjoin innerjoin总结来说就是 ,如A知道通往B如何走:B知道通往C如何走:但是A不知道通往C如何走,但是A可以通过B获得去往C的通往方式.. 首先,假设有A,B两张表,结构及 ...

  3. C#中ExecuteReader、ExecuteNonQuery、ExecuteScalar、SqlDataReader、SqlDataAdapter应该怎么用？

    C#中ExecuteReader.ExecuteNonQuery.ExecuteScalar.SqlDataReader.SqlDataAdapter应该怎么用? (2013-10-16 13:21: ...

  4. PostgreSQL 多级分区

    CREATE TABLE range_list (a int,b timestamp) PARTITION BY RANGE (b); CREATE TABLE range_pa1 PARTITION ...

  5. Redis高可用 Sentinel

    官网: https://redis.io/topics/sentinel Redis的主从只能实现数据热备份的功能,主宕机后从无法自动接管服务,因此Redis推出了Sentinel的主从监控模式. S ...

  6. python3中list列表的一些操作

    最近遇到许多List的操作,感觉它是一种很重要的一种基础数据结构,本人掌握的也不是很扎实,这里找了一些列表的操作,常用函数,记录下来,希望对大家有用.如果理解有偏差,欢迎指正,感谢! (1)列表的合并 ...

  7. Java反射机制小结和实际操作

    一.什么是反射 1.编译和运行 在了解什么是Java反射机制前,先聊聊Java的编译和运行. 还记得第一次使用记事本编写第一个Java程序的场景吗?通过命令窗口,使用javac命令编译一个.java文 ...

  8. 英语进阶系列-A03-英语升级练习一

    古诗背诵 要求:根据诗句,先翻译成现代文,然后绘制图像. 词汇系列 要求:认真朗读单词,然后通过该单词联想2个词汇,然后给每个单词造句. 例子:class班级,联想到了classroom教室,clas ...

  9. shell编程/字库裁剪(1)——想法

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7679024.html 作者:窗户 Q ...

  10. jvisualVM的使用

    jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...