为 clearfix 类所在的 div 内部最后处添加一个 div 标签，内容为 . ，高度为0， 隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .left{

            float: left;

        }

        .container{

            background-color: red;

        }

        .container .item{

            width: 180px;

            height: 150px;

            background-color: #303a40;

            border: 1px solid red;

        }

        .clearfix:after{

            content: '.';

            display: block;

            clear: both;

            visibility: hidden;

            height: 0;

        }

    </style>

</head>

<body>

    <div class="container clearfix">

        <div class="item left"></div>

        <div class="item left"></div>

        <div class="item left"></div>

        <div class="item left"></div>

        <div class="item left"></div>

        <div class="item left"></div>

        <div class="item left"></div>

        <div class="item left"></div>

    </div>

    <div>abcd</div>

</body>

</html>

HTML 练习清除浮动 :after的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. float---浮动带来的影响与清除浮动带来的影响方法----在路上（20）

    使用float会带来哪些影响: 脱标:无行级块级之分: 相互贴靠:若想之间有空隙可用margin与padding: 顶边对齐: 文字环绕: 当使用float后,子标签脱离父标签,父标签就会失去高度,此 ...

  3. [html/css]清除浮动的相关技巧

    以前只了解得很浅显,转载了一篇不错的文,学习参考 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可 ...

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

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

  5. CSS清除浮动float方法总结

    使用浮动造成的BUG: 使用浮动前:(子节点是将父节点撑开了) 代码如下 <div class="box"> <div class="d1"& ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. css清除浮动深度解析

    首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...

  8. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  9. CSS清除浮动技巧

    一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了f ...

  10. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

随机推荐

  1. Jupyter-notebook 导出时不显示Input[]代码

    参考: https://stackoverflow.com/questions/34818723/export-notebook-to-pdf-without-code    1. 第一个方式是直接在 ...

  2. Spring Boot实战笔记（四）-- Spring常用配置（事件Application Event）

    一.事件(Application Event) Spring的事件为Bean和Bean之间的消息通信提供了支持.当一个Bean处理完一个任务之后,希望另一个Bean知道并能做相应的处理,这时我们就需要 ...

  3. XamarinForm Effects 调用事件

    原文地址 在Xamarin.Forms控件中实现底层多点触控跟踪. 一个effect可以定义和调用一个事件,在底层本地视图中发出信号的变化.这篇文章演示如何实现底层多点触控跟踪,以及如何生成信号触摸活 ...

  4. ThinkPHP5+Apicloud+vue商城APP实战

    ThinkPHP5+Apicoud+vue商城APP实战 目录 章节1:项目概述 课时1apicloud平台介绍.04:38 课时2知识体系架构介绍.16:10 章节2:apicloud50分钟快速入 ...

  5. ucloud mysql

    [root@--- bin]# yum install mysql-server Loaded plugins: fastestmirror Setting up Install Process Lo ...

  6. client,server,nginx 在使用keepAlive 专题

    2. TCP keepalive overview In order to understand what TCP keepalive (which we will just call keepali ...

  7. java获取一个月的天数

    import java.text.SimpleDateFormat; import java.util.Calendar; public class Test { public static void ...

  8. spring boot -Properties & configuration

    72. Properties & configuration72.1 Automatically expand properties at build timeRather than hard ...

  9. yum 出问题了

    今天用yum 安装ntp 的过程中用了 Ctrl+ z, 然后yum 再也不能使用了: error: rpmdb: BDB0113 Thread/process 6589/14060193936774 ...

  10. Java程序员必备的Intellij插件

    以下是我用过不错的Intellij插件 1. .ignore 地址:https://plugins.jetbrains.com/plugin/7495--ignore 生成各种ignore文件,一键创 ...