给元素设置了float属性后脱离了文档流,不占据位置,所以其父级无法将其包裹,需要清除浮动。
代码段:
<style>
.box {
border:1px solid black;
}
.item {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<div class="box">
<div class="item"></div>
</div>
效果:
清除浮动的几种方法:
方法一:给父级设置高度
代码段:
.box {
border:1px solid black;
height:200px;
}
问题解决:
缺点:扩展性不好,没有解决根本问题
方法二:给父级加上float属性:
代码段:
.box {
border:1px solid black;
float: left;
}
成功解决:
缺点:需要给每个父级加浮动,一直延续到html,margin左右自动失效,太麻烦
方法三:加空标签,给空标签清除浮动
代码段:
<style>
.box {
border:1px solid black;
}
.item {
width: 200px;
height: 200px;
background: red;
float: left;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="clearfix"></div>
</div>
</body>
成功解决:
缺点:增加了多余标签,IE6下有最小高度(解决后IE6下还有2px偏差)
方法四:添加换行标签
代码段:
<style>
.box {
border:1px solid black;
}
.item {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<body>
<div class="box">
<div class="item"></div>
<br clear="all" />
</div>
</body>
成功解决:
缺点:和添加空标签一样,引入了多余标签,同时不符合工作中结构、样式、行为三者分离的要求。
方法五:给父级加上inline-block
代码段:
.box {
border:1px solid black;
display: inline-block;
}
成功解决:
缺点:margin左右auto失效
方法六:使用after伪类,给浮动元素的父级加上此类:现在最常用的方法
代码段:
<style>
.box {
border:1px solid black;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.item {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<div class="box clearfix">
<div class="item"></div>
</div>
成功解决:
注:在IE6下,要用zoom属性触发hasLayout:
.clearfix { *zoom:1}
方法七:使用overflow属性
代码段:
<style>
.box {
border:1px solid black;
overflow: hidden;
}
.item {
width: 200px;
height: 200px;
background: red;
float: left;
}
</style>
<div class="box">
<div class="item"></div>
</div>
成功解决:
缺点:需要配合宽度或者zoom兼容IE6 IE7(其实还有一些问题)
以上这七种清除浮动的方法,其中利用after伪类方法最常使用,读者可以根据实际情况选择最佳方法,欢迎纠错。