浮动的本质是让块级元素在一行显示。这样便可以让原本不能在一行显示的元素可以在一行显示了(如li标签)。给元素添加了浮动就会导致元素脱离标准流而不占据原先的位置,这样就会影响网页的布局,因此需要想个办法解决这种问题。用什么办法呢?网页布局不就是一个个盒子组成的吗?像搭积木一样,最终成为一张张漂亮的网页。因此我们为什么不用一个父盒子将需要添加浮动的标签元素包起来,这样便不能影响外面的其他的盒子。由于子盒子的大小是会变化的,我们一般不好给父盒子的宽高。需要子盒子去撑开父盒子。但子盒子添加了浮动脱离了标准流不占据位置了,而父盒子还是标准流---->父盒子没有宽高了。清除浮动的本质是解决父盒子因子盒子浮动而内部高度为零的问题。
额外标签法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1.浮动的本质:让div块级元素(行内元素)在一行显示。float
2.清除浮动的本质:解决父级元素,因子元素浮动而内部高度为零
元素浮动以后,不站有原来的位置,脱离标准流。
3.清除浮动的有四种方法:w3c推荐额外标签发,overflow法,添加after伪元素法,
添加双伪元素法。主要同过clear:both;
额外标签法:在父级元素的子元素的末尾添加一个空标签如<div style="clear:both"></div>
overflow法:给父级元素添加overflow:hidden属性
添加after伪元素:.clearfix:after {content:"";height:0;display:block;clear:both;}
clearfix{*zoom:1}
添加after和before双伪元素:.clearfix:after,.clearfix:before{
content:"";display:table;}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
*/
.father {
width: 300px;
border: 1px solid red;
/*overflow:hidden;*/
}
.big {
width: 100px;
height: 300px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: orange;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clearfix:after,
.clearfix:before {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
overflow:hidden法
.father {
width: 300px;
border: 1px solid red;
overflow:hidden;
}
after伪元素法
.clearfix:after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
after和before双标签法
.clearfix:after,
.clearfix:before {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}