Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вопрос о вложенных блоках с float (https://javascript.ru/forum/xhtml-html-css/30687-vopros-o-vlozhennykh-blokakh-s-float.html)

PashPP 12.08.2012 15:17

Вопрос о вложенных блоках с float
 
Почему, если вложить в один блок несколько других с флоатом, то они выезжают за пределы родительского блока, пока не назначить ему overflow: hidden ?
Вот пример:

<!doctype html>
<head>
<style>
#allinn {
   width: 1000px;
   margin: auto;
}
.questions {
    background-color: silver;
    overflow: hidden;
}
.answers {
    background-color: red;
}
.questionblock > input{
    display:block;
}
.answerblock > input{
   display:block;
}
.questionblock {
 float: left;
}
.answerblock {
   float: left;

}
</style>
</head>
<body>
<div id="allinn">
<div class='episod'>
   <div class="questions">
      <h3> Блок </h3>
      <h4> Вопросы </h4>
    <div class="questionblock">
        <textarea cols="45" rows="4" ></textarea>
        <input type="button" value="Del" onclick="delthis(this)" />
    </div>
    <div class="questionblock">
        <textarea cols="45" rows="4" ></textarea>
        <input type="button" value="Del" onclick="delthis(this)" />
    </div>
    <div class="questionblock">
        <textarea cols="45" rows="4" ></textarea>
        <input type="button" value="Del" onclick="delthis(this)" />
    </div>
      <input type="button" value="add q" onclick="addblock(this, 'question')"/>
      <input  type="button" value="InnerHTML" onclick="alert(document.body.innerHTML)"/>
   </div>

   <div class = 'answers'>
      <h4>Ответы</h4>
      <div class="answerblock">
         <textarea cols="45" rows="3" ></textarea>
         <input type="button" value="Del" onclick="delthis(this)" />
      </div>
      <div class="answerblock">
         <textarea cols="45" rows="3" ></textarea>
         <input type="button" value="Del" onclick="delthis(this)" />
      </div>
      <div class="answerblock">
         <textarea cols="45" rows="3" ></textarea>
         <input type="button" value="Del" onclick="delthis(this)" />
      </div>
      <input type="button" value="add a" onclick="addblock(this, 'answer')"/>
   </div> 
</div> 
<input type="button" value="add e" onclick="addepisod(this)"/>
</div>
</body>

Aetae 12.08.2012 19:25

Это стандартное поведение. Смысл кроется в самом слове float.

/qoogle html float
Вопрос - обычный, ответов, детально ражёванных - море.


Часовой пояс GMT +3, время: 06:17.