плавать правую кнопку, не выходя за пределы родительского div tailwindcss

Question

Я пытаюсь выпустить кнопку справа от карты. Я хочу, чтобы оно появилось в правом нижнем углу.

Когда я использую поплавок справа. Он появляется за пределами родительского div, есть ли способ правильно его расположить?

<div class="m-10">
    <div>
        <div class="bg-white shadow-lg border-grey w-1/3 ">
            <div class="p-4 flex">
                <div class="pt-3 text-center font-bold text-2xl w-16  h-16 bg-grey-lightest">
                    D
                </div>
                <div class="ml-4">
                    Team Name
                </div>
            </div>
            <div class="float-right">
                <a :href="'/company/' + team.id">
                    <button class="ml-2 bg-blue hover:bg-blue-dark text-white text-sm font-bold rounded p-2">
                        View
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>

У меня здесь работает песочница с кодом

https://codesandbox.io/s/tailwind-css-nl0ph

Answer 1

Вместо использования класса float-right используйте text-right

Answer 2

Добавьте этот новый класс для очистки плавающего элемента

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

и затем применить этот класс к содержащему div (родительскому div кнопки)

источник: https://www.w3schools.com/howto/howto_css_clearfix.asp