1.偽類解決margin-top塌陷:
如果兩個不浮動的盒子相互嵌套,對內(nèi)部的盒子設置margin-top會導致屬性被自動轉(zhuǎn)移到外部的盒子上,導致內(nèi)部盒子的margin-top設置失敗最靠譜的解決方式是為父元素添加一個偽類:
/*偽類解決margin-top塌陷*/
.clearfix:before{
content:"";
display: table;
}
解決margin-top塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin-top塌陷</title>
<style>
body, a, p{
margin:0;
padding:0;
}
.outside{
width:300px;
height: 400px;
background-color: green;
margin: 0 auto;
}
.inside{
width: 50px;
height:50px;
background-color: gold;
margin-top: 50px;
}
/*偽類解決margin-top塌陷*/
.clearfix:before{
content:"";
display: table;
}
</style>
</head>
<body>
<div class="outside clearfix">
<div class="inside">
</div>
</div>
</body>
</html>
2.浮動子元素動態(tài)改變父元素寬度:
在設計網(wǎng)頁布局時,為了便于快速布局,會將子元素設為浮動元素,父元素寬度設為固定,高度不設置,這樣隨著子元素的添加,父元素的高度就會動態(tài)變化,但尷尬的是,浮動子元素并不能"撐開父元素的高度",于是為父元素增加偽類便成了解決這種尷尬局面最好的方式;
.clearfix:after{
content: "";
display: table;
clear:both;
}
子元素動態(tài)改變父元素尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動子元素寬度</title>
<style>
.outside{
width: 200px;
border: 2px solid red;
}
.inside{
float: left;
width: 200px;
height: 100px;
margin: 20px 0 20px;
border: 1px solid green;
}
.clearfix:after{
content: "";
display: table;
clear:both;
}
</style>
</head>
<body>
<div class="outside clearfix">
<div class="inside">
</div>
<div class="inside">
</div>
</div>
</body>
</html>
小結:
以上兩種情況極其常見,解決方式也很類似,所以可對兩種方式做一個封裝:
.clearfix:before, .clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear:both;
}
/*適配非主流瀏覽器(IE瀏覽器)*/
.clearfix{
zoom:1;
}
以后遇到上面兩種問題,只要將 小結 中的源碼引入到對應的css(層疊樣式表),最后在父元素class屬性中 中引入clearfix即可
<div class="outside clearfix">
<div class="inside">
</div>
<div class="inside">
</div>
</div>
reset.css
h1,h2,h3,h4,h5,h6,p,body,ul,ol,dl,dd,dt,input{
/*去掉默認樣式*/
margin: 0;
padding: 0;
}
ul,ol{
/*去掉左邊的點或者數(shù)字*/
list-style: none;
}
a{
/*去掉下劃線*/
text-decoration: none;
}
em,i{
/*去掉斜體*/
font-style: normal;
}
b,strong{
/*去掉加粗*/
font-weight: normal;
}
/*清除浮動影響 和清除margintop塌陷 合在一起的寫法*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
/*兼容ie*/
zoom:1;
}
