1.为什么要清除浮动
清除浮动(Clearing floats)在网页设计和开发中是非常重要的,主要有以下几个原因:
1.父元素高度塌陷
当子元素使用浮动(float)布局时,它们会脱离正常的文档流,这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度,它将不会围绕浮动元素展开,这可能导致父元素的高度塌陷为0,从而影响布局和样式。
当父盒子不设置高度,内部放三个盒子,未给三个盒子设置浮动,则他们会默认撑开父盒子
当给内部三个盒子加上float-left属性的时,下面的黑色盒子就会顶上来,父盒子没设置高度,变成一条线
2.文本环绕问题
浮动元素可能会与周围的文本或内联元素重叠,导致文本环绕浮动元素,这在某些情况下可能是期望的效果,但在其他情况下则可能导致布局混乱。
3.元素重叠
浮动元素可能会与其他元素重叠,特别是在没有正确设置元素之间的间距或边界时。
2.清除浮动的四种方法
1.额外标签法
在浮动元素末尾添加一个空标签,如<div style="clear:both"></div>
。这个方法简单通俗,容易书写,但会增加很多无意义的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.father {
width: 800px;
background-color: rgb(255, 80, 109);
margin-top: 50px;
}
.son1 {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 300px;
height: 300px;
background-color: rgb(255, 171, 232);
float: left;
}
.son3 {
width: 200px;
height: 200px;
background-color: rgb(212, 254, 194);
float: left;
}
.footer {
height: 200px;
background-color: #a4a4a4;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
2.父级元素添加overflow属性
通过设置父元素的overflow
属性为hidden
或auto
来清除浮动。这种方法通过触发BFC(块级格式化上下文)来阻止浮动影响到父元素的尺寸。
.father {
width: 800px;
background-color: rgb(255, 80, 109);
margin-top: 50px;
overflow: hidden;
}
3.使用伪元素清除浮动(推荐)
利用:after
或:before
伪元素来清除浮动。这种方法的好处是不用单独加标签。具体可以通过设置伪元素的content
、display
、clear
等属性来实现。
1)使用:after
伪元素
通过给父元素添加一个:after
伪元素,并设置相应的CSS属性来清除浮动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
.father {
width: 800px;
background-color: rgb(255, 80, 109);
margin-top: 50px;
overflow: hidden;
}
.son1 {
width: 100px;
height: 100px;
background-color: skyblue;
float: left;
}
.son2 {
width: 300px;
height: 300px;
background-color: rgb(255, 171, 232);
float: left;
}
.son3 {
width: 200px;
height: 200px;
background-color: rgb(212, 254, 194);
float: left;
}
.footer {
height: 200px;
background-color: #a4a4a4;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
</div>
<div class="footer"></div>
</body>
</html>
2)使用:before
和:after
伪元素
除了使用:after
伪元素,还可以使用:before
伪元素配合来实现清除浮动的效果。这种方法虽然稍微复杂一些,但有时候也能起到特定的作用。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}