<!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. mysql练习----SUM and COUNT/zh图（二）

    世界国家概况 GROUP BY 和 HAVING 通过包括一个GROUP BY子句功能, SUM并将COUNT 其应用于共享值的项目组.当你指定 GROUP BY continent 结果是每个不同的 ...

  2. [20190306]共享服务模式与SDU.txt

    [20190306]共享服务模式与SDU.txt --//一些文档提到共享服务模式,服务端SDU=65535,测试验证看看.--//链接:https://blogs.sap.com/2013/02/0 ...

  3. JQuery实现全选、全不选和反选功能

    看重点就行了,最后面给一个网页完整的代码 代码实例: function selectStu() { $.ajax("StuList",{ type:"post" ...

  4. SQL SERVER启动步骤

    第一步 从注册表读取SQL SERVER启动信息 (1)Audit  Level:设置SQL SERVER是否记录用户登陆信息 Login Mode:设置SQL SERVER登陆类型是只接受windo ...

  5. iOS开发创建UI的耗时操作处理

    项目中有网络请求.读写操作等一系列耗时操作时,为了避免阻塞主线程,我们会把这些耗时操作放到子线程中去处理,当处理完成后,再回到主线程更新UI,这样就不会阻塞主线程.但是创建UI的时候一般都是在主线程中 ...

  6. 思科4506E做ehterchannel故障排查

    思科4506E做ehterchannel故障排查 转载于:https://blog.51cto.com/eric1026/1910912 一.故障描述 某客户有两台4506E汇聚交换机,需要做ethe ...

  7. VSCode 首次打开提示“Git installation not found.”解决方案

    ※前提大家先在本地安装好相应的git版本(下载地址:https://www.git-scm.com/download/) 一.找到“默认用户设置”

  8. 《Java大学教程》—第23章 Java网络编程

    本章主要关注的是Java的几个应用网络编程的场景,对于网络编程没有太多深入介绍,而Java本来也没有多少针对网络编程的特性.虽然Java有个Applet的概念,但是真用这个的开发的场景其实不多. 23 ...

  9. PostgreSQL 数据库NULL值的默认排序行为与查询、索引定义规范 - nulls first\last, asc\desc

    背景 在数据库中NULL值是指UNKNOWN的值,不存储任何值,在排序时,它排在有值的行前面还是后面通过语法来指定. 例如 -- 表示null排在有值行的前面 select * from tbl or ...

  10. ES5-ES6-ES7_Promise对象详解

    Promise对象概述(什么是Promise) Promise 是异步编程的一种解决方案,比传统的异步解决方案——回调函数和事件——更合理和更强大 所谓Promise,简单说就是一个容器,里面保存着某 ...