CSS消除波动方式总结

2020-10-20 22:38 jianzhan

消除波动的缘故

假定1个 div 內部有个波动的 div,当內部 div 的高宽比要比外层的父级 div 高宽比大时,可能致使父级 div 高宽比没法伴随着內部 div 的高宽比自融入,这是因为波动元素早已摆脱了一切正常文本文档流,因而没法对父级元素造成危害。举比如下:


拷贝编码
编码以下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

此时,大家就必须手动式来消除波动。

添加空 div

这是我以前的做法,即在末尾处加上1个空的 div,并设定 clear: both 特性。


拷贝编码
编码以下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
#clear {
clear: both;
}
</style>
<div id="a">A
<div id="b">B</div>
<div id="clear"></div>
</div>

这个方式看似简易,可是假如消除波动的地区较多,会造成许多不经意义的 div,针对全部 HTML 构造无疑是有缺点的。

设置父级 div 高宽比

这个方式有点 hard code,因为父级 div 没法高宽比自融入,因而大家能够立即给父级 div 设定1个固定不动的高宽比值,如上例,考虑到到 border 的值,设置父级 div 高宽比为 52px。


拷贝编码
编码以下:

<style>
#a {
width: 100px;
height: 52px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 

这个方式很迅速但也敏感,1旦內部波动元素高宽比产生转变就失效了,因此只能运用于高宽比固定不动的情景。

设置父级 div 特性 overflow

立即给父级 div 加上 overflow: hidden 或 overflow: auto 特性,这里以 overflow: hidden 为例。


拷贝编码
编码以下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 

这个看上去又简易又好用,可是你不可以对父级 div 设定高宽比,1旦父级 div 设定了固定不动高宽比,那末波动元素超过的一部分也会被掩藏。


拷贝编码
编码以下:

<style>
#a {
width: 100px;
height: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

当应用 overflow: auto 特性另外设置固定不动高宽比时效性果为:

设定父级 div 伪类 before && after

这个方式即难题中详细介绍的新方式,对父级 div 设定伪类 before 和 after 的值。


拷贝编码
编码以下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

 

这个方式应当是最好计划方案,即不容易造成不经意义的空 div,另外当父级元素高宽比固定不动时其实不会危害內部的波动元素高宽比。可是唯11点便是伪类的适配性难题。针对低版本号的 IE 访问器大家可使用:


拷贝编码
编码以下:

#a {
zoom:1
}

在阅读文章了 @ShingChi 兄强烈推荐的这篇博文 - http://nicolasgallagher.com/micro-clearfix-hack/ 后,大家还能够进1步地简化编码以下:


拷贝编码
编码以下:

<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: table;
clear: both;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>