РЕЗЮМЕ
Плавающий элемент демонстрирует непоследовательное вертикальное выравнивание со смежным неплавающим элементом, эта изменчивость зависит от значения border-top-width и значения overflow контейнера или родительского элемента. Что дает?
Фон
Я столкнулся с этой ситуацией, когда практиковался с макетом, включающим <img> элементы. Я только начал самостоятельно изучать HTML / CSS в прошлом месяце, так что прочитайте мне немного лекций, если это связано с чем-то фундаментальным, что я упустил из виду.
Подробности
В контейнере <div> есть плавающий элемент и неплавающий элемент блока.
Плавающий элемент (p1) имеет фиксированную ширину и поле 0. Он плавает в любом левом / правом направлении. Это начальный плавающий элемент (т. Е. Первый в строке для всплытия в сторону ячейки с содержимым).
Смежный элемент (p2) представляет собой неплавающий блок, который оборачивается вокруг p1. Обратите внимание, что ненулевое значение поля преднамеренно задано для p2 здесь, чтобы показать, что p1 и p2 не выровнены под одним из сценариев ios, описанных ниже.
Содержащий элемент <div> имеет 0 padding.
При этой настройке я обнаружил, что существует как минимум два способа, которыми плавающий элемент (p1) может позиционироваться относительно border-top-width и overflow:
- Плавающий элемент (p1) выравнивается со смежным неплавающим элементом (p2) (т. Е. Верхняя граница блока p1 совпадает с верхней границей блока p2).
CSS Правила:
div {border-top-width: 0px;}
и
div {overflow: visible;}
Плавающее вместо этого элемент (p1) выравнивается с верхней границей содержащего ящика или родительского элемента.
CSS Правила:
div {border-top-width: non-0px;}
или
div {overflow: auto/hidden/scroll/}
Обратите внимание, что в случае 2 достаточно одного правила для включения выравнивания.
Код
Слишком упрощенный код будет выглядеть примерно так:
HTML
<div>
<img src="example.jpg">
<p>Random text</p>
</div>
CSS
img {
float: left;
}
/* floating element aligns with adjacent element */
div {
border: none;
overflow: visible;
}
или
/* floating element aligns with top border of container */
div {
border-top-width: 1px;
overflow: auto;
}
Я поставил пример на jsfiddle: https://jsfiddle.net/tLumj9x7/
Или вы можете проверить его с помощью фрагмента ниже:
/* <body>, <div> margin set to 0 to avoid interference */
body {
margin: 0px;
}
div {
margin: 0px;
}
/* border drawn above the paragraphs to denote top border of 2nd <div> */
.div1 {
border-bottom: 1px solid;
}
p {
border: 1px solid;
}
/* floating paragraph: margin set to 0 to highlight unusual alignment */
.p1 {
float: left;
margin: 0px;
width: 400px;
}
/* note that a <p> element has a default margin of 1em, so this declaration is just for demonstration */
.p2 {
margin: 16px;
}
input#border:checked~div.div2 {
border-top: 0.02px solid transparent;
}
input#overflow:checked~div.div2 {
overflow: auto;
}
<form>
<input type="checkbox" name="border" id="border" />container border-top-width: non-0<br />
<input type="checkbox" name="overflow" id="overflow" />container overflow: auto / hidden/ scroll<br />
<div class="div1">
</div>
<div class="div2">
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</form>
Вопросы
Как точно определяется положение исходного плавающего элемента в отношении к содержащему его элементу (в нашем случае блоку <div>)?
Какое свойство border-top-width имеет какое-либо отношение к "привязке" плавающего элемента-стартапа?
То же самое с overflow собственность. С точки зрения свойств, как overflow влияет на коробку контейнера "структурно"?
Из двух сценариев ios выше, которые показывают позиционирование "по умолчанию" для начала плавания элемент, если вообще?
На другом, но связанном примечании. Если я размещу поле вокруг плавающего элемента p1, который плавает влево, его левое поле сжимается с левым полем соседнего неплавающего элемента p2. Это стандартное поведение? Я читал, что поле плавающих элементов не разрушается, поэтому я не уверен, правильно ли я понял эту концепцию.
Это мой первый пост на stackoverflow, поэтому спасибо, что прочитали мой вопрос! Я новичок в веб-разработке и с нетерпением жду ваших ответов.