<!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. RHEL 5.7 使用rpm安装XtraBackup问题总结

    在Red Hat Enterprise Linux Server release 5.7 (Tikanga)上使用RPM方式安装Percona Xtrabackup 2.4.6时遇到了一些问题,特意总 ...

  2. KMP算法详解-彻底清楚了(转载+部分原创)

    引言 KMP算法指的是字符串模式匹配算法,问题是:在主串T中找到第一次出现完整子串P时的起始位置.该算法是三位大牛:D.E.Knuth.J.H.Morris和V.R.Pratt同时发现的,以其名字首字 ...

  3. EOS智能合约开发(一)：EOS环境搭建和启动节点

    EOS和以太坊很像,EOS很明确的说明它就是一个区块链的操作系统,BM在博客中也是说过的. 可以这样比喻,EOS就相当于内置激励系统的Windows/Linux/MacOS,这是它的一个定位. 包括以 ...

  4. MATLAB简易画图2—普通直角坐标系

    MATLAB简易画图2—普通直角坐标系 本人的MATLAB版本为: 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 继续在“MATLAB简易画图”这篇随 ...

  5. 20个必不可少的Python库

    转载:http://www.python123.org/tutorials/58b41f2a28c8f30100bd41dc 读者们好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之 ...

  6. 【字符串】ZSC-字符串编辑

    Description 从键盘输入一个字符串(长度<=40个字符),对字符串进行编辑.例如,输入"This is a book." 现对该字符串进行编辑,编辑功能有:(1) ...

  7. U盘插入电脑3.0的口没有反应了，2.0的口就可以

    如果驱动没有问题的话,很有可能是优盘硬件故障. 尝试解决办法: 1.使劲插(就是用力一插到底).... 2.插入三分之一,不过速度只能达到2.0的速度.

  8. 《Java大学教程》—第21章 高级案例研究

    21.3    需求:P510用例模型(use case model):用例图(use case diagram).用例(use case).行为说明(behaviour specification) ...

  9. 【大数据技术】HBase介绍

    1.HBase简介1.1 Hbase是什么HBase是一种构建在HDFS之上的分布式.面向列.多版本.非关系型的数据库,是Google Bigtable 的开源实现. 在需要实时读写.随机访问超大规模 ...

  10. Spring 的application.properties项目配置与注解

    一.项目结构介绍 如上图所示,Spring Boot的基础结构共三个文件: src/main/java  程序开发以及主程序入口 src/main/resources 配置文件 src/test/ja ...