清除浮动的4种方式
来源:互联网 发布:3g软件开发培训学校 编辑:程序博客网 时间:2024/06/05 20:55
清除浮动:根据情况需要来清楚浮动 。
清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。
1.、额外标签法 给浮动盒子的后面添加一个新的div
2、overflow:hidden 触发了bfc模式,就不用清除浮动了 bfc模式:http://www.cnblogs.com/dojo-lzz/p/3999013.html
3、伪元素 网易搜狐常用
.clearfix:after{
content:””;
visibility:hidden;
display:block;
height:0;
clear:both;
}
.clearfix{ //IE6模式下
zoom:1;
}
清除浮动: 真正的叫法 闭合浮动
4、 双伪元素 小米,淘宝常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 600px;
height: auto;
border:1px solid red;
}
.child1,.child2{
background: pink;
width: 250px;
height: 250px;
float: left;
}
.clearfix:before,.clearfix:after{ /*真正意义上的闭合浮动*/
display: table;
content: "";
}
.clearfix:after{
clear:both;
}
.clearfix{ //IE6
zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child1">哥哥</div>
<div class="child2">妹妹</div>
</div>
</body>
</html>
- 清除浮动的4种方式
- 清除浮动的方式?
- 清除浮动的方式
- 清除浮动的方式
- 清除浮动的方式
- 清除浮动的方式
- 清除浮动的方式
- 清除浮动的5种方式
- 清除浮动的3种方式:
- 清除浮动的几种方式
- 清除浮动的几种方式
- CSS 清除浮动的三种方式
- 清除浮动的几种方式总结
- 清除浮动的三种方式
- 清除浮动的几种方式
- float 清除浮动的三种方式
- 清除浮动最好的两种方式
- css清除浮动的几种方式
- 二叉搜索树
- javascript类型判断(typeof instanceof ,toStirng.call())
- 在CentOS6.4 yum 线上升级 php5.3.3 至 PHP5.6 .24
- 第八周项目二--建立链串的算法库
- 简单日历
- 清除浮动的4种方式
- Git教程前言
- NotSerializableException,序列化的实体类的构造方法里不能传Context
- nginx源代码分析 - 生成的Makefile解析
- 进程模型
- 浅谈Java异常处理机制
- 一道抽象向量组习题
- Git安装配置
- 【上】安全HTTPS-全面详解对称加密,非对称加密,数字签名,数字证书和HTTPS