Вопрос:
У меня есть следующий код, где a и b блоки div находятся соответственно слева и справа.
<!—HTML—> <div style=»background-color:#125467″ id=»a»>a</div> <div style=»background-color:#AABBFF» id=»b»>b</div> <div style=»background-color:#990033″ id=»c»>c</div> <div style=»background-color:#885544″ id=»d»>d</div> <div style=»background-color:#7799BB» id=»e»>e</div> <div style=»background-color:#33FF88″ id=»f»>f</div> <div style=»background-color:brown» id=»g»>g</div> <div style=»background-color:blue» id=»h»>h</div /*CSS*/ div { width: 100px; height: 100px; color: white; text-align: center; font-size: 20px; } * { border: 1px black dashed } #a { float:left; } #b { float:right; }
Проблема в том, что я не понимаю, почему блок d перекрывает блок c как на следующем рисунке:
но другие блоки идут нормально. Я знаю, что если я добавлю
#c { clear: both; }
все будет хорошо.
Но почему без clear:both он ведет себя таким образом?
Лучший ответ:
Собственно, d-блок не перекрывается c.
Это блок, перекрывающий c.
Это происходит потому, что и a, и b float ‘ed, и браузеры видят их с вычисленной высотой 0px, что означает, что c, d, e, f все перемещаются вверх по странице и потому, что a появляется первым в DOM он сидит поверх c.
Ответ №1
Именно из-за свойства float: left
Режим отображения по умолчанию block. Таким образом, divs будут идти сразу после другого в новой строке. Но так как вы установили от float: left до #a. Div выбирается из нормального потока, игнорируя позицию #a по отношению к другим элементам и, следовательно, перекрываясь.
Ответ №2
Попробуйте создать контейнер
Position:relative;
и элементы или внутри него
Position:absolute;
