浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height
性。会导致盒子高度的塌陷.
清除浮动是一个前端开发人员必须掌握的技巧
1.固定高度法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
/*可以为父标签设定一个高度, 这里就为父元素设置了高度防止了浮动影响和塌陷的问题*/
#box1 {
height: 100px;
}
#box1 div {
float: left;
width: 100px;
background: red;
height: 100px;
}
#box2 {
width: 100px;
height: 100px;
border: 1px solid #000;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">
<div></div>
</div>
<div id="box2"></div>
</body>
</html>
2外墙法
在两个盒子之间防止一个div,设置clear属性为both;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1 div {
float: left;
width: 100px;
background: red;
height: 100px;
}
/*这是外墙*/
#wall{
height: 0;
clear: both;
}
#box2 {
width: 100px;
height: 100px;
border: 1px solid #000;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">
<div></div>
</div>
<div id="wall"></div>
<div id="box2"></div>
</body>
</html>
但是有个问题,会导致上面的盒子下外边距失效,要设外边距只能通过下面的盒子去设定
3内墙法
和外墙法差不多,只是在第一个盒子的尾部放置一个div,设置清除浮动的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1>#float {
float: left;
width: 100px;
background: red;
height: 100px;
}
#wall{
height: 0;
clear: both;
}
#box2 {
width: 100px;
height: 100px;
border: 1px solid #000;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">
<div id="float"></div>
<div id="wall"></div>
</div>
<div id="box2"></div>
</body>
</html>
4overflow 清除法
在父元素设置一个overflow为hidden或者auto属性就都以.;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1 {
overflow: hidden; /*这里设置了overflow就会防止因为盒子浮动*/
}
#box1 #float {
float: left;
width: 100px;
background: red;
height: 100px;
}
#box2 {
width: 100px;
height: 100px;
border: 1px solid #000;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">
<div id="float"></div>
</div>
<div id="box2"></div>
</body>
</html>
这个方法很简单,也是我比较喜欢用的一种办法
5通过css3的伪类选择器添加一个外墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
#box1::after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
#box1 #float {
float: left;
width: 100px;
background: red;
height: 100px;
}
#box2 {
width: 100px;
height: 100px;
border: 1px solid #000;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">
<div id="float"></div>
</div>
<div id="box2"></div>
<script>
</script>
</body>
</html>
这个比较常用,而且兼容性也不错
6还有一个是5方法的加强版
#box1::after {
clear:both;
content:"";
display:table;
}
网友评论