CSS: Как отменить float: left / right;

Чтобы отменить свойство float: left / right; в CSS, можно использовать несколько способов.

Использовать float: none;

Самый простой способ — это явно указать float: none; для элемента, чтобы отменить его плавающее положение:

.element {
    float: none;
}

Использовать clear: both;

Свойство clear позволяет отменить влияние плавающих элементов. Если вы хотите, чтобы следующий элемент не обтекал плавающий элемент, используйте clear: both;:

ВыделитьCSS

.element {
    clear: both;
}

Использовать overflow: hidden; или overflow: auto;

Если вы хотите отменить плавание для родительского элемента, можно использовать overflow: hidden; или overflow: auto;. Это заставит родительский элемент обрезать плавающие элементы и не позволять им выходить за его пределы:

ВыделитьCSS

.parent-element {
    overflow: hidden;
}

Использовать display: block; или display: inline-block;

Если вы хотите отменить плавание и вернуть элемент к нормальному потоку документа, можно использовать display: block; или display: inline-block;:

ВыделитьCSS

.element {
    display: block;
}

Пример

ВыделитьHTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Отмена float</title>
    <style>
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .no-float {
            float: none;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="float-left">Плавающий элемент</div>
    <div class="no-float">Отменённый плавающий элемент</div>
</body>
</html>

Итог: Чтобы отменить float: left / right;, используйте float: none; или другие методы, такие как clear, overflow или display. Это позволит вернуть элемент в нормальный поток документа и отменить его плавающее положение.