如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开。
解决方法:
 
CSS代码:
 
复制代码 代码如下:

.clearfix:after {
content: "." ;
display: block ;
height: 0 ;
clear: both ;
visibility: hidden ;
}
.clearfix{ display: inline-block; }
/* Hides from IE-mac */
*html .clearfix{ height:1%; }
.clearfix{ display:block; }
/* End hide from IE-mac */

//clearfix的CSS使用了after这个伪对象
//应用clearfix的元素的结尾添加content中的内容
//转移字符“ ”,Mac IE浏览器会忽略掉这段Hack,但是Windows IE不会
以下是详细解释:
首先 清除浮动的原理 ,其实 是元素留出足够多的 垂直外边距 给浮动的元素。
 
复制代码 代码如下:

<div >
<div style="float:left"></div>
</div>
这个效果 是 外层div不会包含内层div。因为浮动的元素 脱离了原始文档流。
以上面这个为例:一般而言 ,有三种方式清除浮动
。第一:让外层元素也浮动,例如:
 
复制代码 代码如下:

<div style="float:left" >
<div style="float:left"></div>
</div>
然后 再此元素之外 的元素上添加clear:both效果。
第二:给外层div的末尾添加一个元素,并利用此元素清楚浮动。
具体用法:
 
复制代码 代码如下:

<div style="clearfix" >
<div style="float:left"></div>
</div>
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}

.clearfix{display:inline-block}
.clearfix{display:block}
其中后面的两个 是为了兼容其他浏览器设置的。因为:after不是所有浏览器都支持的。
第三:利用 overflow属性
 
复制代码 代码如下:

<div style="overflow:hidden" >
<div style="float:left"></div>
</div>

css清除浮动clearfix:after的用法详解的更多相关文章

  1. css伪元素:before和:after用法详解

    css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...

  2. css清除浮动深度解析

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

  3. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  4. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  5. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  6. 什么是CSS清除浮动?

    在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...

  7. css 清除浮动 兼容IE+, FF

    上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...

  8. CSS清除浮动各种方法

    当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...

  9. css清除浮动的集中方法

    一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...

随机推荐

  1. 一份非常完整的 MySQL 规范

    源自:https://www.cnblogs.com/huchong/p/10219318.html 一.数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割. 所有数据库对象名称禁止使用 ...

  2. Python入门-模块2(sys模块、shutil 模块)

    sys模块: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序的版本信息 s ...

  3. mysql常见问题总结

    061 如何删除表? 答案:运行命令 drop table table_name; 062 创建索引 对于查询占主要的应用来说,索引显得尤为重要.很多时候性能问题很简单的就是因为我们忘了添加索引而造成 ...

  4. 禁用loop back check

    在sharepoint 2013 服务器上,如果修改了AAM (alternate access mappings), 在服务器上访问本地的sharepoint就会一直弹出登陆窗口,无法访问. 于是必 ...

  5. ZT 类模板Stack的实现 by vector

    *//*第3章 类模板 与函数相似,类也可以被一种或多种类型参数化.容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,你就可以实现容器类,而不需要确定容器中元素 ...

  6. Oracle学习(十一):PL/SQL

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/v123411739/article/details/30231659 1.知识点:能够对照以下的录屏 ...

  7. OSM

    一.OSM是什么 开放街道图(OpenStreetMap,简称OSM)是一个网上地图协作计划,目标是创造一个内容自由且能让所有人编辑的世界地图(wiki:http://wiki.openstreetm ...

  8. Hive学习之路 (十七)Hive分析窗口函数(五) GROUPING SETS、GROUPING__ID、CUBE和ROLLUP

    概述 GROUPING SETS,GROUPING__ID,CUBE,ROLLUP 这几个分析函数通常用于OLAP中,不能累加,而且需要根据不同维度上钻和下钻的指标统计,比如,分小时.天.月的UV数. ...

  9. Hive学习之路 (八)Hive中文乱码

    Hive注释中文乱码 创建表的时候,comment说明字段包含中文,表成功创建成功之后,中文说明显示乱码 create external table movie( userID int comment ...

  10. Day2 Mybatis初识(二)

    mapper接口开发 传统dao的开发问题(ibatis) 方法调用:字符串易错,硬编码 mapper代理开发 a) 编写全局配置 b) 编写接口(自动根据接口和映射文件创建实现类) c) 编写映射文 ...