浮动会使元素逃离文档流,按照指定方向 发生移动,遇到父级边界或相邻的浮动元素停下来。
高度塌陷问题:在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱。
下面是解决浮动的几种方法,以供我自己学习:
1、添加空div标签(clear:both;)
在浮动元素结尾处添加一个空的div标签,利用css提供的clear:both清除浮动,让父级div能自动获取到高度。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" type="text/html; charset=utf-8" >
<style type="text/css">
#main{
border:1px solid red;
}
#left{
float:left;
width:30%;
height:300px;
background:red;
}
#right{
float:right;
width:70%;
height:200px;
background:green;
}
/*利用clear:both清除浮动*/
#clearfloat{
clear:both;
}
#footer{
height:50px;
background:#ccc;
margin-top:10px;
border:1px solid red;
}
</style>
<title>清除浮动</title>
</head>
<body>
<div id="main">
<div id="left">left我是左边</div>
<div id="right">right我是右边</div>
<div id="clearfloat"></div> <!--添加一个空的div-->
</div>
<div id="footer">footer</div>
</body>
</html>
缺点:若页面浮动较多,会增加很多空div。
不推荐使用,此方法是以前主要使用的一种方法。
2、给父级div设置高度
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" type="text/html; charset=utf-8" >
<style type="text/css">
#main{
border:1px solid red;
height:300px;/*父级div设置高度*/
}
#left{
float:left;
width:30%;
height:300px;
background:red;
}
#right{
float:right;
width:70%;
height:200px;
background:green;
}
#footer{
height:50px;
background:#ccc;
margin-top:10px;
border:1px solid red;
}
</style>
<title>清除浮动</title>
</head>
<body>
<div id="main">
<div id="left">left我是左边</div>
<div id="right">right我是右边</div>
</div>
<div id="footer">footer</div>
</body>
</html>
给父级div手动设置高度,解决了父级无法自动获取高度的问题。
缺点:只适合高度固定的布局,若父级高度与浮动元素最大高度不一致时,会产生问题。
不推荐使用,只建议高度固定的布局使用。
3、父级div定义overflow:hidden;或overflow:auto;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" type="text/html; charset=utf-8" >
<style type="text/css">
#main{
border:1px solid red;
overflow:hidden;/*父级元素定义overflow*/
/*overflow:auto;*/
zoom:1;/*为了兼容IE6,7*/
}
#left{
float:left;
width:30%;
height:300px;
background:red;
}
#right{
float:right;
width:70%;
height:200px;
background:green;
}
#footer{
height:50px;
background:#ccc;
margin-top:10px;
border:1px solid red;
}
</style>
<title>清除浮动</title>
</head>
<body>
<div id="main">
<div id="left">left我是左边</div>
<div id="right">right我是右边</div>
</div>
<div id="footer">footer</div>
</body>
</html>
使用此方法必须定义width或者zoom:1,同时不能定义height,浏览器会自动检查浮动区域的高度。
缺点:overflow:hidden;不能和position配合使用,因为超出的尺寸会被隐藏;
overflow:auto;内部宽高超过父级div时会出现滚动条。
4、br清浮动
在浮动结尾加入标签br,父级div要定义zoom:1解决IE浮动问题。
<div id="main">
<div id="left">left我是左边</div>
<div id="right">right我是右边</div>
<br clear="both"></div> <!--在这里定义一个br-->
</div>
不推荐使用,了解即可。
5、父级div定义伪类after和zoom
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" type="text/html; charset=utf-8" >
<style type="text/css">
.main{
border:1px solid red;
}
#left{
float:left;
width:30%;
height:400px;
background:red;
}
#right{
float:right;
width:70%;
height:300px;
background:green;
}
.clearfloat:after{/*定义伪类after*/
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clearfloat{/*定义zoom,解决IE兼容性问题*/
zoom:1;
}
#footer{
height:50px;
background:#ccc;
margin-top:10px;
border:1px solid red;
}
</style>
<title>清除浮动</title>
</head>
<body>
<div class="main clearfloat">
<div id="left">left我是左边</div>
<div id="right">right我是右边</div>
</div>
<div id="footer">footer</div>
</body>
</html>
IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决IE6,7浮动问题
优点:浏览器支持好,不易出现怪问题,目前众多大型网站使用
推荐使用,建议定义公共类,以减少css代码。
6、父级同时浮动(以浮制浮)
原理:所有代码一起浮动,就变成一个整体。
缺点:会产生新的浮动问题。
不建议使用,了解即可。
7、父级div设置display属性
dispaly:table;
将div变成表格,会产生新的未知问题,不推荐使用,了解即可。
display:inline-block;
会使父级的margin左右auto失效,无法使用margin:0 auto;居中
不推荐使用
总结:文中的3,6,7都是利用BFC清除浮动的方法