Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float. При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.
Например, пусть у нас задан следующий блок:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Блочная верстка в HTML5</title> <style> #sidebar{ float: left; width: 25%; padding: 10px; } #main{ border-left: 1px solid #ccc; width:75%; padding: 15px; margin-left: 25%; } </style> </head> <body> <div id="sidebar"> <h2>The standard Lorem Ipsum passage</h2> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...</p> </div> <div id="main"> <h2>What is Lorem Ipsum?</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text..</p> </div> </body> </html>
В сайдбаре довольно много текста, который, как ожидается, будет эффективно вписан в границы плавающего блока. Однако в реальности мы можем получить проблему:
Как видно из примера буквы вылезают из плавающего блока за границу, несмотря даже на то, что по идее в плавающем блоке должен быть установлен еще и внутренний отступ в 10 пикселей от правой границы. Почему так происходит? Зачастую браузеры своеобразно интерпретируют размеры элемента. В частности, у всех элементов по умолчанию для свойства box-sizing используется значение content-box, то есть при определении ширины и высоты элемента браузер будет прибавлять к значению свойств width и height также и внутренние отступы padding и ширину границы. В итоге это может привести к выпадению плавающих элементов из тех блоков, которые для них предназначены. Поэтому часто для всех элементов рекомендуется устанавливать для свойства box-sizing значение border-box, чтобы все элементы измерялись одинаково, а их ширина представляла только значение свойства width. Поэтому нередко в стилях добавляется следующий стиль
Это интересно
0
|
|||
Последние откомментированные темы: