Главная страница  /  Занятия  /  #4  /  Свойство float

Свойство float

Задание:

Рассказать об использовании свойства float элементов html-документа.

Значения left, right, свойство clear:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значения left и right свойства float, свойство clear</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
   
     <div id="wrapper">
      <h2>Синий цветок</h2>
      <div class="left"><img src="left.png"></div>
      <p>Длинный текст справа от&nbsp;картинки длинный текст справа от&nbsp;картинки длинный текст справа от&nbsp;картинки длинный текст справа от&nbsp;картинки длинный текст справа от&nbsp;картинки длинный текст справа от&nbsp;картинки</p>
      <div class="clearBoth"></div>
      <h2>Букет</h2>
      <div class="right"><img src="right.png"></div>
      <p>Длинный текст слева от&nbsp;картинки длинный текст слева от&nbsp;картинки длинный текст слева от&nbsp;картинки длинный текст слева от&nbsp;картинки длинный текст слева от&nbsp;картинки длинный текст слева от&nbsp;картинки</p>
     </div>
    </body>
   
   </html>

Файл styles.css:

   body				{ margin: 0; }
   
   h2				{ background-color: #e0e0e0; padding: 10px; }
   img				{ display: block; }
   
   #wrapper			{ width: 600px; }
   
   .left			{ float: left; padding-right: 20px; }
   .right			{ float: right; padding-left: 20px; }
   .clearBoth			{ clear: both; }

Результат:

Пример использования значений left и right свойства float можно посмотреть здесь.