25 lines
1.3 KiB
HTML
25 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="uk">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Float та Clear</title>
|
||
<link rel="stylesheet" href="style4.css">
|
||
</head>
|
||
<body>
|
||
<h1>Float та Clear</h1>
|
||
|
||
<div class="floated-box">
|
||
<img src="https://i.ytimg.com/vi/BwSQyuUxYfI/hq720.jpg?sqp=-oaymwEhCK4FEIIDSFryq4qpAxMIARUAAAAAGAElAADIQj0AgKJD&rs=AOn4CLBSh-1FNkCXWq0LfQwk-xxOy_BZqA" width="150">
|
||
<p>Цей блок має <b>float: left</b>.</p>
|
||
</div>
|
||
|
||
<p>Цей текст обтікає "плаваючий" блок. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Він продовжує обтікати.</p>
|
||
<p>Текст продовжує обтікати. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Поки є місце, текст буде поруч.</p>
|
||
|
||
<div class="cleared-box">
|
||
Цей блок використовує <b>clear: left</b>, тому він не обтікає попередній елемент, а "очищує" простір і стрибає під нього.
|
||
</div>
|
||
|
||
<p>Цей текст з'явиться вже після "очищеного" блоку.</p>
|
||
</body>
|
||
</html> |