<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .clearfix:after{

            content: "111";

            display: block;

            clear: both;

            visibility: hidden;

            height: 0;

        }

        .c{

            background-color: red;

        }

        .c .item{

            float: left;

        }

    </style>

</head>

<body>

    <div class="c clearfix">

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

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

    </div>

</body>

</html>

.clearfix:after的更多相关文章

  1. clearfix的最佳方案----在路上（22）

    clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...

  2. clearfix的应用

    之前遇到一个问题,引用Bootstrap框架时 一行显示四个模块,小屏幕时显示两个模块 当内容一样时,大小屏幕时一样的,但是当其中一个和另一个内容不同时,展示效果就会有错乱 <div class ...

  3. bootstrap之clearfix

    bootstrap之clearfix 在bootstrap辅助类中有那么一类,是这么定义的: 利用clearfix样式清除浮动,但是前提条件是在超小型屏幕上能显示才行(因为其是用visible-xs样 ...

  4. 解读浮动闭合最佳方案：clearfix

    .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...

  5. clearfix清除浮动

    首先在很多很多年以前我们常用的清除浮动是这样的. 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题 ...

  6. ie7 用 clearfix 清除浮动时遇到的问题

    <!doctype html> <html> <head> <style> .fr{float:right;display:inline} li{bor ...

  7. css中clearfix清除浮动的用法及其原理示例介绍

    clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...

  8. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  9. [笔记]使用clearfix清除浮动

    转载自奶牛博客 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; ...

  10. clearfix清除浮动进化史

    我想大家在写CSS的时候应该都对清除浮动的用法深有体会,今天我们就还讨论下clearfix的进化史吧. clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的. .clear{cle ...

随机推荐

  1. python基础16 ----面向对象程序设计二

    一.继承与派生 1.继承的定义:继承是一种创建新类的方式,即在类中提取共同的部分创建出一个类,这样的类称为父类,也可称为基类和超类,新建的类称为派生类或子类. 2.单继承:就相当于子类继承了一个父类. ...

  2. 找到最大或最小的N个值

    对于python原生的数据类型来说,并不存在直接的方法可以找到最大或最小的N个值, 传统的方法必须先排序,然后再截取相应的值,而且对于集合这类数据类型来说还不能直接排序, 需要先转化为列表才行,有的时 ...

  3. 新手用的git配置命令

    新手用的git配置命令 /**第一次链接远程仓库 本地已有项目需要上传码云 */ //1.配置码云用户名 git config --global user.name "昵称" // ...

  4. java面试_数据库

    1.group by 根据表里的字段名分类,相同字段名只显示一行记录,通常与聚集函数max.min合用选择最大值最小值,或者与having合用筛选,结果按照group by的字段排序 例:select ...

  5. java项目常用架构

    三层架构 : 界面层/表现层 UI 业务逻辑层 BLL 针对具体的问题的操作,也可以理解成对数据层的操作,对数据业务逻辑处理. 数据访问层 DAL 访问数据库 mvc : 而 MVC 是在三层架构的基 ...

  6. read + 计算

    #!/bin/sbin read -p "please input first number:" a read -p "please input second numbe ...

  7. HDU 4417 Super Mario（2012杭州网络赛 H 离线线段树）

    突然想到的节约时间的方法,感觉6翻了  给你n个数字,接着m个询问.每次问你一段区间内不大于某个数字(不一定是给你的数字)的个数 直接线段树没法做,因为每次给你的数字不一样,父节点无法统计.但是离线一 ...

  8. mysql查看和设置timeout 和批量杀死链接进程

    查看的语句 show global variables like "%timeout%"; 结果: +-----------------------------+--------- ...

  9. Mac系统给移动硬盘分区(图文)

    刚买的硬盘500G   准备分几个区 移动硬盘分区格式化有3中形式: 1.Mac OS 扩展日志 格式 此格式mac专用,这种格式的硬盘在PC上不可见,可以用来给 Time Machine 备份, T ...

  10. cout是右结合的

    cout是右结合的,(从右到左压栈?) cout<<++a<<","<<a++;  的运行顺序是 1.a的值压栈 2.a自加 3.‘,’压栈 4 ...