清楚浮动的几种方法
2016-03-01 15:52
417 查看
清楚浮动的几种方法
为什么我们用float：left/right之后会对其父辈或兄弟元素产生影响：浮动框不在普通的文档流中，它脱离了文档流，所以包围的内容的不占据空间。如下面的代码：
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
div{
background-color: #00000;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
</html>
如何让包围的元素在视觉上包围浮动元素呢？
1、在紧靠最后一个浮动元素之后添加一个空元素并清理浮动。
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
.....
.clear{
clear:both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
<pclass="clear"> </p>
</div>
<p>rrr</p>
</body>
</html>
2、对浮动元素的父辈元素进行浮动（这种方法会对父辈的后面的兄弟元素有影响）
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
div{
background-color: #00000;
float: left;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
</html>
3、使用overflow属性（overflow：hidden、auto、overflow。（可是其会自动清理包含的任何浮动元素）
<styletype="text/css">
div{
background-color: #00000;
overflow: hidden;
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
4、结合使用：after伪类。
<styletype="text/css">
div{
background-color: #00000;}
.fl{
float: left;
}
.fr{
float: right;
}
.fr:after{
clear: both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
5.overflow与zoom的结合使用；
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
div{
background-color: #00000;
overflow: auto;//也可以改为overflow:hidden;
zoom:1;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<pclass="clear">rrr</p>
</body>
</html>
6、overflow与width结合
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div{
background-color:#00000;
overflow:auto;//也可以改为overflow: hidden;
width: 100%;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<pclass="clear">rrr</p>
</body>
</html>
为什么我们用float：left/right之后会对其父辈或兄弟元素产生影响：浮动框不在普通的文档流中，它脱离了文档流，所以包围的内容的不占据空间。如下面的代码：
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
div{
background-color: #00000;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
</html>
如何让包围的元素在视觉上包围浮动元素呢？
1、在紧靠最后一个浮动元素之后添加一个空元素并清理浮动。
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
.....
.clear{
clear:both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
<pclass="clear"> </p>
</div>
<p>rrr</p>
</body>
</html>
2、对浮动元素的父辈元素进行浮动（这种方法会对父辈的后面的兄弟元素有影响）
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
div{
background-color: #00000;
float: left;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
</html>
3、使用overflow属性（overflow：hidden、auto、overflow。（可是其会自动清理包含的任何浮动元素）
<styletype="text/css">
div{
background-color: #00000;
overflow: hidden;
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
4、结合使用：after伪类。
<styletype="text/css">
div{
background-color: #00000;}
.fl{
float: left;
}
.fr{
float: right;
}
.fr:after{
clear: both;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<p>rrr</p>
</body>
5.overflow与zoom的结合使用；
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<styletype="text/css">
div{
background-color: #00000;
overflow: auto;//也可以改为overflow:hidden;
zoom:1;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<pclass="clear">rrr</p>
</body>
</html>
6、overflow与width结合
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div{
background-color:#00000;
overflow:auto;//也可以改为overflow: hidden;
width: 100%;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
<body>
<div>
<pclass="fl">1221233</p>
<pclass="fr">uriiot</p>
</div>
<pclass="clear">rrr</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AS3聊天单行输入框图文混排完美实现
- ObjectARX学习笔记
- LeetCode题解：Best Time to Buy and Sell Stock with Cooldown
- HDU 2612
- 如何使用js实现电影海报画廊特效？
- [MTK6574] 移植odin问题总结
- AIDL
- LeetCode 35 - Search Insert Position
- Atitit.linq java的原理与实现 解释器模式
- 若有以下定义，且0<=i<4,则不正确的赋值语句是 int b[4][6],*p,*q[4]; A q[i]=b[i]; B p=b; C p=b[i]; D q[i]=&b[0][0];
- 图片压缩时 某个 jpeg图片 报错 Unsupported Image Type
- HDOJ 1715 大菲波数
- unity 切圆角矩形 --shader编程
- jsonp使用，spring4.x对jsonp的支持
- Atitit.linq java的原理与实现 解释器模式
- Atitit.linq java的原理与实现 解释器模式
- HDOJ 1715 大菲波数
- LAMP中php配置
- 【最大流/费用流】BZOJ1834-[ZJOI2010]network 网络扩容
- SPRING IN ACTION 第4版笔记-第二章-002-@ComponentScan、@Autowired的用法