CSS отображается неправильно

Question

Я добавил новый тег на страницу продукта в woocommerce.

Я добавил пользовательский код CSS.Это сломало структуру.

Это веб-сайт:

https://lenghia.com/san-pham/tui-deo-cheo-moc-tron/#tab-hoi_dap

Это мой код:

.cf7{
   float:left;
   width: 48%
 }
.cf{
   float:right;
   width:48%
 }

Любая помощь приветствуется.

Answer 1

Основная проблема в float:right и float:left в классах cf и cf7.Если вы удалите это, ваша граница снова станет нормальной.Но, основываясь на ваших комментариях, вы хотите сохранить его в двух столбцах.Лучший способ - использовать flex.Вы можете узнать о flex в Полное руководство по flexbox .

Answer 2

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

Поместить очистку класса в последний раздел.

Answer 3

Добавьте это к родительскому div:

overflow: overlay;

или чтобы браузер решил:

overflow: auto;