Почему кнопка перемещается со свойством float? ⇐ CSS

[Anonymous]

Я пытаюсь создать VN, и я попытался создать плавающее число, потому что мне нужно, чтобы текст располагался между двумя изображениями, но я думаю, что из-за этого кнопка слегка смещается вправо, когда она появляется.
/>Я продолжаю видеть рекомендации по другим методам размещения вещей правильно, например display:flex; но я не могу использовать его в данном случае.

Код: Выделить всё

document.addEventListener("DOMContentLoaded", () => {
let index = 1;
const button = document.querySelector('button');
const sections = document.querySelectorAll('section');
button.addEventListener('click', function() {
if (sections[index]) {
if (hasImg(index) && hasImg(index - 1)) {
sections[index - 1].classList.remove("d-block");
}
sections[index].classList.add("d-block");
typeWriter(sections[index]);
}
if (!sections[++index]) {
button.disabled = true;
}
});

function hasImg(index) {
return sections[index].querySelector('img');
}

typeWriter(sections[0]);
});

function typeWriter(el) {
const content = el.innerHTML;
el.innerHTML = '';
let i = 0;
const typeInterval = setInterval(() => {
if (content[i] === '', i) + 1;
el.innerHTML += content.substring(i, endIdx);
i = endIdx;
} else {
el.innerHTML += content[i];
i++;
}
if (i >= content.length) {
clearInterval(typeInterval);
}
}, 95);
}

Код: Выделить всё

section {
display: none;
text-align: center;
}

.d-block {
display: block;
}

button {
margin: 0 auto;
display: block;
}

.portrait {
animation: fadeIn 5s;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.happy {
float: left;
}

.sad {
float: right;
}

Код: Выделить всё

First
Second

[img]https://cdn.iconscout.com/icon/premium/png-256-thumb/arrow-small-right-4241483-3517873.png[/img]
[img]https://cdn.iconscout.com/icon/free/png-256/free-small-diamond-geometric-blue-38006.png[/img]

Las
Ursa
next

Подробнее здесь: https://stackoverflow.com/questions/781 ... t-property