overflow:hidden是大家常用的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
width: 200px;
/*height: 50px;*/
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
}
#div2{
width: 100px;
height: 100px;
background: green;
float: left;
}
</style>
</head>
<body>
<div id="div1" >
<div id="div2" ></div>
</div>
</body>
</html>
当父div没有规定height值,子div浮动后,父div只剩下padding-top+padding-bottom的30px.
如何让子div再次将父div的高度撑开呢?固然将父div也浮动起来是比较常用的做法,其实还可以使用overflower:hidden来清除浮动带来的影响。
#div1{
width: 200px;
/*height: 50px;*/
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
<strong>overflow: hidden;</strong>
}
效果如下:
当然,我们以前用的最多的还是使用overflow:hidden来隐藏子元素相对于父元素的超界溢出,如下所示。
#div1{
width: 200px;
height: 50px;
padding: 10px 20px 20px 10px;
background: red;
margin: 0 auto;
overflow: hidden;
}