Высота div обертки равна 0 с плавающими элементами внутри

У меня есть обертка<div> который содержит два внутренних<div>с плавающей.

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

Проблема в обертке<div> имеет ширину 80 пикселей с двумя внутренними<div> 40px каждый. Но всегда обертка<div> является0px в высоте, которая заставляет границу казаться линией наверху.

Поэтому я поместил два внутренних<div>с внутри<table>, Это сработало хорошо. Но как мне избежать этой проблемы, не идя на<table>?

 Oriol03 апр. 2015 г., 17:06
возможный дубликатWhich method of ‘clearfix’ is best?

Ответы на вопрос(3)

Попробуй это:

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close
Решение Вопроса

Задаватьoverflow: hidden на родителя.

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
 25 июл. 2016 г., 18:18
Мне интересно, почему он так рушится?

Внешнийdiv являетсярушится потому что двое детейdivвнутри него плавают. Самым простым решением для этого является установкаoverflow: hidden; на внешнемdiv.

Ваш ответ на вопрос