如何不使用float浮动（避免浮动对其他元素造成影响）确定表单与before伪类的相对位置

先上图：
由于使用了float浮动，三角形下方的一块区域都会受到浮动的影响，所以只好用几个
让Email Adress下移。（这真是一个垃圾的方法啊）
再上代码：
HTML

 <div class="dropdown">
        <a href="#" class="dropbtn">Login</a>
        <div class="dropdown-content">
            <form>

                <br><br><br>/*三个换行*/
                <label for="email">Email Address</label><br>
                <input type="text" name="email" id="email" style="height:35px;width:230px" /><br>
                <label for="password">Password</label><br>
                <input type="password" name="password" style="height:35px;width:230px" id="password"/><br>
                <label class="remeber" for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label><br>
                <input type="submit" id="login" style="background:coral;font-size:16px;color:white;width: 230px;height: 35px" value="login"/>
            </form>
        </div>
    </div>

CSS样式：

.dropdown-content:before
{
    content: '';

    position:relative;top:-59px;left:20px;
   float:left;
    border-width: 30px;/*对三角形的设置*/
    border-style: solid;
    border-color: transparent lightpink transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/

}

由我的代码，找了很久才发现问题，浮动并不是根本原因，是因为我把三角形放在表单内部，而后又对三角形设置了 position:relative;top:-59px;left:20px;float:left;使其定位在表单顶端，而因为设置在表单内部，表单中给三角形占了位置，因此会造成Email Adress偏移原位（窃以为表单没有给它占位置，是float影响了表单内部的位置！）
删掉三个
后如下图
划重点啦！
解决方法1：
将before伪类从表单这个div拿出，单独把三角形放入在Login与表单之间的等高，100%width的flex盒子。
但还是灰常麻烦，显然此非最优解，以后学到了新的再修正。

--------------------------我是分割线嘻嘻嘻--------------------------------------------------
经过我锲而不舍…终于搞定了！
解决方法2：
`.dropdown-content:before
{
content: ‘’;
width:0;
height:0;
border-width:0 30px 30px 30px;
border-color:red transparent ;
border-style:solid;
position:relative;top:-52px;left:-95px;

}`

以上修改后的before伪类和三角形样式，成功去掉了float这个害人的东西！
分析：主要原因是float对三角形的影响，以及我对之前三角形代码的不了解，否则就能很好地控制三角形了。
最后用一个相对定位搞定三角形的位置。
总结：不要偷懒乱抄网上不懂的代码！