Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства 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
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20251026055709