一、为什么要闭合浮动(清除浮动)
一个父元素中有三个子元素(分别为黑粉紫色)
父元素有分别为红色和蓝色的上下边框
当给子元素加入float:left后
由上下边框可以看出此时父元素的高度坍塌
标准流:盒子会各占整行位置。子盒子若是标准流,父盒子虽然没有高度,但是会撑
开父盒子高度。
浮动:盒子浮了起来,不会占据原来的位置,若父盒子没有定义高度,则不会撑开父
盒子,父盒子高度为0。
代码:
<body>
<div class="main">
<div class="a float">
</div>
<div class="b float">
</div>
<div class="c float">
</div>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
border-top: 6px red solid;
border-bottom: 6px blue solid;
}
.float {
float: left;
}
.a {
background: black;
width: 60px;
height: 60px;
}
.b {
background: pink;
width: 60px;
height: 60px;
}
.c {
background: purple;
width: 60px;
height: 60px;
}
</style>
二、闭合浮动(清除浮动)后的效果
三、闭合浮动(清除浮动)的方法
方案1(最常用的方式):使用after伪类
.main:after{
content:'';
clear: both;
display:block;
}
.main{
*zoom:1;/* 前面有*号的属性只有IE能识别,这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素 */
}
方案2:给父元素加一个样式overflow:hidden
.main{
overflow: hidden;
}
方案3(不建议使用):
给父元素加一个子元素,并且给这个子元素加样式clear:both
<div class="main">
<div class="a float">
</div>
<div class="b float">
</div>
<div class="c float">
</div>
<div class="clear">
<!--新加的子元素-->
</div>
</div>
.clear {
clear:both;
/*图像的左侧和右侧均不允许出现浮动元素*/
}
缺点:多了一个div盒子
还有其他方法这里就不列举了,面试会三种方法就够用了,实际工作中一般都采取方案1