多种解决浮动的方法

来源：互联网发布：mac上安装jenkins 编辑：程序博客网时间：2024/04/28 15:40

所谓的浮动就是元素的属性floa：left或者right。元素浮动会使自己脱离文档流。我的理解就是在DOM中没有了自己位置。看例子吧：

1<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1</title>

.div1 {
background: #000080;
border: 1px solid red;
height: 200px; /*解决代码*/
}
.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px;
}

.left {
float: left;
width: 20%;
height: 200px;
background: #DDD;
}
.right {
float: right;
width: 30%;
height: 80px;
background: #DDD;
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</body>
</html>

第一种：left和right div浮动使父节点div1没有东西撑开，高度为0；div2就顶上来了。所以在div1加上一个height：200px固定宽度。就可以解决了。

缺点：只适合高度固定的布局，要给出精确的高度，如果子节点的高度和父级div不一样时，会产生问题。

2.<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2</title>
<style type="text/css">
.div1 {
background: #000080;
border: 1px solid red;
}

.div2 {
background: #800080;
border: 1px solid red;
height: 100px;
margin-top: 10px;
}

.left {
float: left;
width: 20%;
height: 200px;
background: #DDD;
}

.right {
float: right;
width: 30%;
height: 80px;
background: #DDD;
}
/*清除浮动代码*/
.clearfloat {
clear: both;
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>1313
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
</body>
</html>

2. 添加一个空div（clearfloat），利用css中一个属性clear:both清除浮动，让父级div能自动获取到高度

缺点：如果页面浮动布局很多，就要增加很多空div，会使代码产生冗余，而且在美观上也很差。

3.<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>3</title>
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
</head>
<body>

<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>

</body>

</html>

3。利用伪类的方式（最好用）：在父级div加上一个一块区域，其实原理也是都差不多，就是让div1有了一个高度。挺好用的就是不容易理解.

简单的理解就当是在这个div上面盖上了一个透明的div。很多大型网站都是这么用的。包括bootstrap里面写专门写了一个clearfix的class。

0 0