1.css元素浮动的特点
- 浮动的元素会脱离标准流(不再占用原先位置,浮动到指定位置)
- 浮动的元素具有行内块元素的特点(但是两个元素之间无默认外边距,紧贴在一起)
- 浮动的元素会与父元素的顶部对齐
2.清除浮动
原因:父元素在没有设置高度的情况下,让子元素都添加浮动特定,会导致父元素的高度坍塌(没有高度了),影响原本的布局。
注意:若父元素设置了高度,则不会出现父元素高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.father div {
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 此时父元素没有设置任何的高度,当其内部的四个子元素都添加浮动 -->
<div class="father">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>
</body>
</html>
解决方式:
1.使用after伪元素清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.father div {
float: left;
width: 100px;
height: 100px;
}
/* 添加下面这段代码 */
.father:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.father {
*zoom: 1;
/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
</style>
</head>
<body>
<div class="father">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>
</body>
</html>
2.使用before和after双伪类清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.father div {
float: left;
width: 100px;
height: 100px;
}
/* 添加下面这段代码 */
.father:after,
.father:before {
content: "";
display: table;
}
.father:after {
clear: both;
}
.father { /* 兼容ie6 */
*zoom: 1;
}
</style>
</head>
<body>
<div class="father">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>
</body>
</html>
3.给父元素添加overflow实现(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
overflow: hidden;
}
.father div {
float: left;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
</div>
</body>
</html>
4.添加一个额外div清除(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
.father .float {
float: left;
width: 100px;
height: 100px;
}
/* 添加下面这段代码 */
.father .clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="float">test1</div>
<div class="float">test2</div>
<div class="float">test3</div>
<div class="float">test4</div>
<div class="clear"></div>
</div>
</body>
</html>