css清除浮动clearfix:after的用法详解
如果外部有一个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的用法详解的更多相关文章
- css伪元素:before和:after用法详解
css的伪元素,之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似是页面 ...
- css清除浮动深度解析
首先引入一个新的概念"包裹". float:left会使得该属性的作用容器包裹住其内部元素:那么还有么有其他属性能够产生类似于浮动这种包裹性? 答案是有的:像"浮动&qu ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 什么是CSS清除浮动?
在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外 ...
- css 清除浮动 兼容IE+, FF
上代码: <!doctype html> <html> <head> <meta charset="utf-8"> <titl ...
- CSS清除浮动各种方法
当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...
- css清除浮动的集中方法
一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...
随机推荐
- Centos下防止ssh暴力破解密码
参考文章地址:https://yq.aliyun.com/ziliao/48446 https://www.cnblogs.com/lsdb/p/7095288.html 1.收集 /var/log/ ...
- MySQL管理.md
用户管理 创建 举例 mysql> create user test@localhost identified by 'password'; Query OK, 0 rows affected ...
- laravel框架之blade模板引擎
## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...
- Golang reflect 反射
反射的规则如下: 从接口值到反射对象的反射 从反射对象到接口值的反射 为了修改反射对象,其值必须可设置 -------------------------------------------- ...
- CVE-2017-8046 复现与分析
环境搭建 使用的项目为https://github.com/spring-guides/gs-accessing-data-rest.git里面的complete,直接用IDEA导入,并修改pom.x ...
- HBase学习之路 (二)HBase集群安装
前提 1.HBase 依赖于 HDFS 做底层的数据存储 2.HBase 依赖于 MapReduce 做数据计算 3.HBase 依赖于 ZooKeeper 做服务协调 4.HBase源码是java编 ...
- python pip安装报错: ConnectTimeoutError
错误: 解决方案: 使用镜像:pip install xxxx -i https://pypi.douban.com/simple 如:pip3 install --upgrade tensorf ...
- 关于ESP8266EX的一些资料
乐鑫智能互联平台 ESP8266EX 拥有高性能无线 SOC,给移动平台设计师带来福⾳音,它以最低成本提供最大实用性,为 WiFi 功能嵌入其他系统提供无限可能. ESP8266EX 是⼀一个完整且⾃ ...
- 404 Note Found队 福大助手项目测评
目录 第一部分 调研,评测 福大助手的bug IOS端 Android端 福大助手结构体系的思维导图 为什么开发人员没有发现这个bug 假设团队开发这款app,应注意哪些方面(架构.部署运维.微服务等 ...
- 1《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——基础(Basics)
基础 正如著名作者Neal Stephenson所说的那样,'(开发, 译者加)开始是命令行',尽管通过用户图形界面使用计算机及其简单,但是在许多场景中,最有效.最灵活地与计算机交互的方式是使用命令行 ...