diff options
Diffstat (limited to 'files/ru/learn/css/css_layout/floats/index.html')
| -rw-r--r-- | files/ru/learn/css/css_layout/floats/index.html | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index 86ff3ac15d..9fc55d47cf 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -26,7 +26,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.</p> -<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для верстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> +<p>Но разработчики быстро осознали, что можно обтекать все что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p> <p>Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшей техникой</a>.</p> @@ -34,9 +34,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <h2 id="Простой_пример_float">Простой пример float</h2> -<p>Давайте выясним как использовать floats. Мы начнем с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> +<p>Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p> -<p>Во-первых, мы начнем с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> +<p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив все что там было до этого:</p> <pre class="brush: html notranslate"><h1>Simple float example</h1> @@ -175,11 +175,11 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> -<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все еще остается в полную ширину.</p> +<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.</p> <h2 id="Очистка_обтекания">Очистка обтекания</h2> -<p>Мы увидели, что обтекаемый объект удален из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p> +<p>Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p> <p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p> @@ -243,9 +243,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <li><code>both</code>: очищает любые обтекаемые объекты, слева или справа.</li> </ul> -<h2 id="Очистка_блоков_обернутых_вокруг_обтекаемых_элементов">Очистка блоков обернутых вокруг обтекаемых элементов</h2> +<h2 id="Очистка_блоков_обёрнутых_вокруг_обтекаемых_элементов">Очистка блоков обёрнутых вокруг обтекаемых элементов</h2> -<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обернуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> +<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p> <pre class="brush: html notranslate"><div class="wrapper"> <div class="box">Float</div> @@ -313,11 +313,11 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> -<p>И еще раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p> +<p>И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. <span class="tlid-translation translation" lang="ru"><span title="">Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула </span></span>обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который <span class="tlid-translation translation" lang="ru"><span title="">правильно справляется с этой ситуацией.</span></span></p> <h3 id="Clearfix_hack">Clearfix hack</h3> -<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и оберточный контент, а также настройки для очистки обоих.</p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Традиционно эта ситуация решалась с помощью так называемого «clearfix hack».</span></span> Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.</p> <p>Добавьте следующий CSS в наш пример:</p> @@ -379,9 +379,9 @@ translation_of: Learn/CSS/CSS_layout/Floats <h3 id="Использование_overflow">Использование overflow</h3> -<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обертки (wrapper) на значение отличное от <code>visible</code>.</p> +<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обёртки (wrapper) на значение отличное от <code>visible</code>.</p> -<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обертки. Блок снова должен быть очищен.</p> +<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p> <pre class="brush: css notranslate">.wrapper { background-color: rgb(79,185,227); @@ -433,7 +433,7 @@ translation_of: Learn/CSS/CSS_layout/Floats <p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> -<p>Этот пример работает путем создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определенных случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p> +<p>Этот пример работает путём создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за <span class="tlid-translation translation" lang="ru"><span title="">непреднамеренный</span></span> последствий использования overflow.</p> <h3 id="display_flow-root">display: flow-root</h3> |