清除浮动的几种方式

来源：互联网发布：手机搜索软件编辑：程序博客网时间：2024/05/21 14:04

清除浮动的几种方式

/*---------------------------------------------------------------------

/*height: 300px; 非开启BFC、且灵活性不足*/

/*以下BFC有缺点*/
/*float: left; margin会失效 */
/*position: absolute;margin会失效*/
/*position: fixed; margin会失效*/

/*BFC*/
/*overflow: hidden; 推荐使用*/

/*推荐使用*/
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
/*开启haslayout*/
/* css hack */
*zoom: 1;
}
/*---------------------------------------------------------------------

以下是具体使用方式：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap{
width: 500px;
border: 2px solid blue;
margin: 0 auto;
}
#inner{
float: left;
width: 300px;
height: 300px;
background: pink;
}

/*推荐使用*/
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
/*开启haslayout*/
/* css hack */
*zoom: 1;
}
</style>
</head>
<body>
<div id="wrap" class="clearfix">

<div id="inner"></div>




</div>
</body>

</html>

阅读全文

0 0