Вопрос о вложенных блоках с 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> |
Это стандартное поведение. Смысл кроется в самом слове float.
/qoogle html float Вопрос - обычный, ответов, детально ражёванных - море. |
Часовой пояс GMT +3, время: 06:17. |