<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
.news {
background-color: gray;
border: solid 1px black;

}
.news img {
float: left;
}

.news p {
float: right;
}
.clearfix:after{
content: "."; /*在类名为“clearfix”的元素内最后面加入内容； */
display:block; /*默认是inline，加入的这个元素转换为块级元素*/
height:0px; /*一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；*/
clear: both;
visibility: hidden;
}

.clearfix {
/* 触发 hasLayout  这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。 */
zoom: 1;
}
</style>
</head>
<body>
<div class="news clearfix">
<img src="7v/1318240446520.jpg" />
<p>some text</p>
</div>

</body>
</html>

清除浮动1-使用:after 伪元素的更多相关文章

  1. 清除浮动的方法 after伪类。

    .clearfix{ *zoom:1; } .clearfix:after{ content: ""; display: block; clear: both; } 在样式中加入上 ...

  2. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

  3. 3 CSS 定位&浮动&水平对齐&组合选择符&伪类&伪元素

    CSS Position(定位):元素的定位与文档流无关 static定位: HTML元素的默认值, 没有定位,元素出现在正常的流中 静态定位的元素不会受到top,bottom,left,right影 ...

  4. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  5. ::after::before清除浮动原理

    先来看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. CSS 清除浮动的四种方法

    在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...

  7. DIV+CSS清除浮动方法

    一.为什么要清除浮动? 1>父元素在未定义高的情况下,由于子元素全部浮动脱离文本流,而造成父元素高的塌陷(正常情况下,父元素的高是由未浮动的子元素撑起来) 2>因为部分子元素的而浮动,脱离 ...

  8. 浮动（float）与清除浮动（clear）

    上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...

  9. 【CSS】清除浮动的五种方式

    清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式 *首先要明确的是,为什么要清除浮动? A 影响其他元素定位 父盒子高度为0,子盒子全部浮动.定位,子盒子不会撑开父盒子,下面的元 ...

随机推荐

  1. 客户信贷管理&临时授信

    信贷额度的组成:假如某客户信用限额1万:开出销售订单时锁定1万:一旦发货1万,销售订单1万限额释放,变成发货锁定限额1万.一旦开票,发货1万限额释放,应收锁定1万限额.清帐成功,应收释放1万.信用限额 ...

  2. jQuery制作瀑布流(转)

    “瀑布流布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之,蘑菇街,点点网,哇哦等等.我第一次听到这个布局名称是来自于“乔花写的<瀑布流布局浅 ...

  3. jQuery_pager.js分页

    在做前端项目中,总是需要自己手写类似于这样的分页效果: 这就需要使用jQuery.pager.js文件,其使用方法为:在html中引入三个文件,分别为: <link rel="styl ...

  4. shell脚本流程搭建

    程序中删除文件夹即用rm -rf ${Dir} rm -f ${Dir}/* rm -f ${Dir}* 的时候要注意先检查路径变量是否有定义不为空. if [ ! -z ${LogDir} ]; t ...

  5. MySQL 命令杂记

    mysql> show processlist; 如果是root帐号,你能看到所有用户的当前连接.如果是其它普通帐号,只能看到自己占用的连接.show processlist;只列出前100条, ...

  6. vim多行注释和取消多行注释

    多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式(可视快模式),然后按j, 或者k选中多行,把需要注释的行标记起来 2. 按大写字母i,再插入注释符,例如// 3 ...

  7. jdk、jre、jvm的关系

    JDK里面的工具也是用JAVA编写的,它们本身运行的时候也需要一套JRE,如C:\Program Files\Java\jdk1.5.x\目录下的JRE.而C:\Program Files\Java\ ...

  8. javaWeb开发总结 ---- 前端数据插入到后台

    一,概述: 本文主要描述如何将数据通过表单提交到后台并插入到数据库．其中后台使用spring框架． 二,开发流程: 明确需求,即将什么数据插入到数据库 平台搭建,配置spring, 数据库,建表 走通 ...

  9. 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight

    先搞offsetTop,最难懂的就是它了 官方解释:返回当前元素的上边界到它的包含元素的上边界的偏移量,以像素为单位.这真TM坑爹啊!有木有!经过仔细研究查找得出结论:offsetTop是相对于离它最 ...

  10. 如何理解java中的变量和常量

    int a =10;这是一个变量,在后面的代码中你可以去更改a的值但如果你在声明a的时候加上了final,那么a就成了常量,后面的代码是不允许对a做修改的.还有一点你要注意,被final修饰的常量必须 ...