为什么要清除浮动?
当父元素在没有设置高度的情况下,子元素设置了float,此时,父元素的高度就会为0
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
.parent{
// 父元素没有设置高度
// 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
width:500px;
background-color:pink;
}
.son{
float:left // 设置浮动,子元素脱标
width:200px
height:200px
background-color:skyblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
清除浮动的四种方法!
1.额外标签法(clear:both)--填加额外子标签
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
.parent{
// 父元素没有设置高度
// 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
width:500px;
background-color:pink;
}
.son{
float:left // 设置浮动,子元素脱标
width:200px
height:200px
background-color:skyblue;
}
.clear{
clear:both
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
/* 额外标签*/
<div class="clear"></div>
</div>
</body>
</html>
2.overflow(溢出隐藏)---给父元素添加
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
.parent{
// 父元素没有设置高度
// 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
width:500px;
background-color:pink;
overflow:hidden; //超出部分隐藏
}
.son{
float:left // 设置浮动,子元素脱标
width:200px
height:200px
background-color:skyblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
3.::after伪元素
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
.parent{
// 父元素没有设置高度
// 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
width:500px;
background-color:pink;
}
.son{
float:left // 设置浮动,子元素脱标
width:200px
height:200px
background-color:skyblue;
}
.parent::after{
content:'';
display:block;
height:0;
clear:both;
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>
4.双伪元素(::before和::after)
<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
.parent{
// 父元素没有设置高度
// 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
width:500px;
background-color:pink;
}
.son{
float:left // 设置浮动,子元素脱标
width:200px
height:200px
background-color:skyblue;
}
.parent::after,.parent::before{
content:'';
display:table;
}
.parent::after{
clear:both
}
</style>
</head>
<body>
<div class="parent">
<div class="son"></div>
</div>
</body>
</html>