闭合浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。也就是高度塌陷问题。
例如:
<style>
.box1{
border: 3px red solid;
}
.box2{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
会出现父元素box1高度为0
一、父元素添加overflow属性
可以给父级添加: overflow为 hidden,auto,scroll 都可以实现。
.box1{
border: 3px red solid;
overflow: hidden;
}
优点: 代码简洁
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。
二、父元素设置高度
可以给父级定高度 : height属性设置高度。
但是可能会影响整体布局。
三、父元素设置浮动
可以给父级设置浮动属性:float属性设置left,right即可
但是会造成宽度丢失, 且会导致下方元素上移,可能影响布局。
四、父元素设置为行内块元素
可以给父级更改元素属性:
display:inline-block;
同上,会造成宽度丢失。且,会出现三像素问题。
五、使用clear属性清楚浮动
方法一:添加空白块元素清除浮动
在高度塌陷的父元素的最后,添加一个空白的块元素,对其进行清除浮动。
<style>
.box1{
border: 3px red solid;
}
.box2{
height: 100px;
width: 100px;
background-color: blue;
float: left;
}
.box3{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
方法二:使用after伪元素清楚浮动
:after 方式为空元素的升级版,好处是不用单独加标签了
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
注意:IE 6/7 添加:
.clearfix {*zoom: 1;}
由于IE6-7不支持:after,使用 zoom:1触发 hasLayout
方法三:双伪元素清楚浮动
同上,只是多使用了before
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}