详解运用clear消除波动的1些难题处理

2021-01-20 17:48 jianzhan

下面这段编码是用来消除波动带来的高宽比塌陷难题

.clearfix:before {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Question 1: 上面的编码的可以完成消除波动的难题吗?

Answer: Can't. 由于clear特性只能操纵元素自身与前面的波动元素的关联。在本例中,应用:before伪元素显著坐落于全部子元素以前,故而clear特性不容易因后边的波动元素造成任何功效实际效果。 clear特性的官方界定能够查询CSS文本文档 。那末应当怎样改动呢?将:before换为:after便可。最后编码以下:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Question 2: content特性的內容能改为空吗content: '';?

Answer: Yes. 由于设定了 height:0; 和 visibility: hidden。 假如设定了content:'';,那末 height:0; 和 visibility: hidden和 能够去掉吗? 自然能够,由于块元素沒有內容就不容易有高宽比咯。

变更后的编码以下:

.clearfix:after {
    content: ""; 
    display: block;
    clear: both;
}

Question 3: display特性的內容能改为 inline 或 inline-block 吗?

Answer: 不可以。 大家要搞清楚float特性的初衷————让文本围绕照片展现。汉语翻译成此外1句话:内联级別的元素会围绕波动元素展现。那末为何 display: block;能够处理高宽比塌陷的难题呢。 由于 clear特性的含意是不让元素自身与波动元素的界限邻近。假如块级元素要不与块级元素界限邻近,仅有换到下1行展现。也正为换行,才将父元素到高宽比撑开了,宣布上面的编码处理高宽比塌陷的基本原理。

Question 4: 下面到div元素会存在高宽比塌陷难题吗?

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear:left;
    }
    img { float: right; }
</style>
<div class="clearfix">
    <span>历史时间的天空</span>
    <img src="images/naruto.gif">
</div>

Answer: 存在。为何呢?要了解 clear特性中, clear:left; 和 clear:right; 的差别。

  • left : 不与左波动的元素造成界限触碰;
  • right : 不与右波动的元素造成界限触碰;
  • both : 不与左波动和右波动的元素造成界限触碰;

因此上面的编码不容易处理高宽比塌陷到难题。

假如有以下编码:

<style>
    .clear-left { clear:left; }
    .clear-right { clear:right; }
    .fl { float: left;}
    .fr { float: right;}
    .box { 
        height: 30px; width: 30px;
        background: yellowgreen;
        margin: 5px;
    }
</style>

<div>
    <div class="box fl">1</div>
    <div class="box fr">2</div>
    <div class="box clear-left">3</div>
</div>
<div>
    <div class="box fl">1</div>
    <div class="box fr">2</div>
    <div class="box clear-right">3</div>
</div>

你会发现,两个div的展现实际效果是同样的。也便是说,假如前面另外存在左波动和右波动到元素,那末clear特性值不管设成left 還是right都不相干紧要。 反过来想,假如clear特性设成 both,那末不管前面的元素是左波动還是右波动,都不相干紧要。这也是clearfix一般设定 clear:both;的缘故。

留意1点,大家1直在说 处理 高宽比塌陷都难题,几乎沒有说消除波动。 是由于实质上,波动并没被消除,大家只是运用clear特性处理了波动元素带来的父级元素高宽比塌陷难题。并且clear特性危害也只是设定clear特性的元素自身,而并不是波动元素。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。