Css清除浮动
这周在逆战班学到了很多的内容,针对于浮动,我有一些感悟。
首先什么是浮动?
元素浮动就是通过给元素添加float:left/right;来使元素脱离文档流,让元素能够并排显示,直到这一行放不下下个元素,再换行。
那为什么要清楚浮动呢?
元素浮动后,脱离了文档流,就不会再占据原有的空间,而原本被这个元素撑开的父元素就会高度塌陷,高度就会变成0px。这会导致与父元素同辈的元素不能够正常显示。所以要进行清楚浮动的设置。
下面是几种清楚浮动的方法。
1.额外标签法 (不推荐)
.clear {
clear: both;
}
同辈元素
优点:方便简洁
缺点:添加了无用的标签 语义化不明
2.给父元素添加overflow:hidden; (不推荐)
#wrap {
width: 500px;
margin: 0 auto;
background: pink;
font-size: 20px;
overflow: hidden;
}
优点:代码会比较简洁;
缺点:当父元素内容增多的时候,超出的部分会被截去
3.使用伪类元素:after 清除浮动 给父元素添加 (推荐)
.clearfix:after {
content: ‘’;
display: block;
clear: both;
height: 0;
visibility: hidden;
}
4.使用before和after双伪类元素清除浮动
.clearfix:after,.clearfix:before{
content: “”;
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
优点:代码更简洁
缺点:需要zoom:1;出发hasLayout。
以上方法都可以清楚浮动,达到下图效果。