CSS обтекание блока
На прошлом уроке мы рассмотрели блочную модель верстки. Напомню, по умолчанию блок имеет основные характеристики — высоту и ширину. Важно отметить, что изначально у <div> ширина равна 100%.
Возникает вопрос — как сверстать несколько блоков в одну строку — друг за другом. Для этого в css есть правило float, которое может применять значение left, right, none. Благодаря обтеканию мы можем располагать блоки по порядку. Но возникает еще одна проблема — при обтекании блоки, как бы, «налипают» друг на друга. Как же избавиться от этого неприятного эффекта. Для этого в css есть правило clear, значение которого может быть left, right, both.
Видео и код урока ниже.
Возникает вопрос — как сверстать несколько блоков в одну строку — друг за другом. Для этого в css есть правило float, которое может применять значение left, right, none. Благодаря обтеканию мы можем располагать блоки по порядку. Но возникает еще одна проблема — при обтекании блоки, как бы, «налипают» друг на друга. Как же избавиться от этого неприятного эффекта. Для этого в css есть правило clear, значение которого может быть left, right, both.
Видео и код урока ниже.
Код урока (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>float</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!</p>
</div>
<div class="two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!</p>
</div>
<div class="three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni ut possimus quas nemo aliquam tempora ratione debitis, laudantium quis, id, nihil ex earum libero minus et eos excepturi hic reprehenderit!</p>
</div>
<div class="four">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ab asperiores et similique totam. Consectetur necessitatibus quas, tenetur quasi iusto nam id quia animi nemo itaque dignissimos ratione, obcaecati repudiandae!</p>
</div>
</body>
</html>
Пример 2 - обтекание картинки текстом
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<img src="https://placekitten.com/g/250/200" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quas explicabo consequatur beatae in nostrum illum ad, velit accusamus odit facilis magnam, suscipit delectus earum maiores vel odio molestiae, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam accusamus temporibus eligendi, commodi sapiente? Numquam non repellendus ullam sed doloribus optio corporis ipsam iste reprehenderit aperiam consectetur, reiciendis velit neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reiciendis, maiores fugit exercitationem nihil, quo odit, voluptatibus quidem nesciunt beatae inventore consequuntur officiis iusto ipsa, dolore praesentium deserunt optio ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis repellat dolores veritatis assumenda optio id odit neque cupiditate velit unde tempore quidem minus provident, saepe cumque similique sit. Sapiente, excepturi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quas explicabo consequatur beatae in nostrum illum ad, velit accusamus odit facilis magnam, suscipit delectus earum maiores vel odio molestiae, tempore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam accusamus temporibus eligendi, commodi sapiente? Numquam non repellendus ullam sed doloribus optio corporis ipsam iste reprehenderit aperiam consectetur, reiciendis velit neque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus reiciendis, maiores fugit exercitationem nihil, quo odit, voluptatibus quidem nesciunt beatae inventore consequuntur officiis iusto ipsa, dolore praesentium deserunt optio ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis repellat dolores veritatis assumenda optio id odit neque cupiditate velit unde tempore quidem minus provident, saepe cumque similique sit. Sapiente, excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum eveniet ipsa ipsam, quia eaque vitae est voluptas non tempora? Debitis nobis ipsum, consequuntur omnis officiis doloremque et a ex, esse.</p>
</div>
</body>
</html>Код урока (CSS)
.one, .two, .three {
float: left;
color: #fff;
width: 33%;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
.four {
background-color: #e1e1e1;
clear: both;
}
img {
float: left;
margin-right: 10px;
}
С Новым Годом и Спасибо большое за уроки! Смотрю с удовольствием!
Здравствуйте.
С новым годом вас. Спасибо большое и удачи вам!