.clearfix:after的用法,清除浮动

今天回顾一下css中的清除浮动

 /*所有主流浏览器都支持 :after 伪元素。*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    
.clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/

测试代码:

<html >
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <style type="text/css">
    /*所有主流浏览器都支持 :after 伪元素。*/
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    
    .clearfix{*+height:1%;}/*不知道有什么用处,不加ie7也没有问题*/

    .box{ background:#111;width:500px; position:relative;;}
    .l{float:left; background:#333;width:200px; height:100px;}
    .r{float:right;background:#666;width:200px; height:200px;}
    .s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}
 </style>
  <div class="box clearfix">
    <div class="l">left</div>
    <div class="r">right</div>
    <div class="s">absolute</div>
  </div>
 </body>
</html>

扩展阅读:

CSS :after 伪元素 http://www.w3school.com.cn/css/pr_pseudo_after.asp

:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏deepcc

css3 box-sizing属性

35960
来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

30370
来自专栏哲学驱动设计

OEA 中 WPF 树型表格虚拟化设计方案

    最近用 OEA 做的仓库管理系统中,许多界面的都需要使用表格控件来显示数据。一是这些表格的列非常多,有的甚至达到了 200 列,而且一个模块的界面中可能...

21570
来自专栏互联网杂技

最全面的前端开发指南

HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 <!-- bad --> <div id="main">...

34470
来自专栏向治洪

微信小程序之picker组件

作为移动端的分发入口,微信小程序虽然没有当初期望的那么火,但是却是一个不能忽视的入口。撇开微信小程序对于腾讯生态的原因不说,微信小程序对于开发还是很方便的,特别...

88350
来自专栏lonelydawn的前端猿区

一款不可多得的火柴时钟

? 火柴时钟 一款有意思的时钟玩具,原生代码编写,使用 CSS 渲染过渡动效,引入 base64 格式 data url 图片。 引用 <link rel=...

31070
来自专栏编程

第1章:初识编程

写在前面 之前答应过不少朋友今年要写个《猫哥极简编程入门》的系列,帮助各位对编程感兴趣的新人和非程序员,快速掌握一些实用的编程技巧,以便快速入门编程以及应付一些...

229100
来自专栏游戏开发那些事

【python游戏编程之旅】第一篇---初识pygame

本系列博客介绍以python+pygame库进行小游戏的开发。有写的不对之处还望各位海涵。

14020
来自专栏Coco的专栏

【CSS进阶】原生JS getComputedStyle等方法解析

24050
来自专栏码神联盟

碎片化 | 第四阶段-41-struts2字节流生成验证码-视频

如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056700jckx.html 验证码实现 需求: 在登录的页面,增...

29890

扫码关注云+社区

领取腾讯云代金券