nazar/web-lec8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Nazar
2025-11-15 15:29:08 +02:00
commit e881dd953c
11 changed files with 406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
task4.html Normal file
View File

@@ -0,0 +1,25 @@
<!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>