-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path14-Overflow-Float-Clear.html
361 lines (331 loc) · 14.1 KB
/
14-Overflow-Float-Clear.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Layout : Overflow , Float and Clear</title>
<style>
body {
background-color: antiquewhite;
}
h1 {
color: brown;
}
h2 {
color: green;
}
h3 {
color: blueviolet;
}
hr {
height: 5px;
background-color: black;
border-radius: 10px;
}
.overflow {
background-color: aqua;
border: 2px solid brown;
width: 300px;
height: 200px;
}
.visible {
overflow: visible;
margin-bottom: 200px;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.float {
background-color: pink;
border: 2px solid brown;
height: 300px;
}
.float-left {
width: 300px;
float: left;
}
.float-right {
width: 300px;
float: right;
}
.float-none {
width: 300px;
float: none;
}
.float-inherit {
width: 300px;
float: inherit;
}
.clear {
background-color: pink;
border: 2px solid brown;
height: 300px;
overflow: auto;
}
.clear-left {
width: 300px;
float: left;
clear: left;
}
/* Exercise */
.exercise div {
display: inline-block;
width: 40%;
}
.exercise img {
width: 300px;
float: left;
}
.box1 {
background-color: aqua;
float: left;
}
.box2 {
background-color: coral;
float: right;
}
footer {
text-align: center;
background-color: blueviolet;
clear: both;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>CSS Layout : Overflow , Float and Clear</h1>
<h2>Overflow</h2>
<p>
The overflow property specifies what should happen if content overflows an
element's box.
</p>
<div class="overflow visible">
<h3>Overflow Visible</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi
exercitationem facilis eos natus quod hic necessitatibus est mollitia id
ex maiores quae atque harum vitae accusantium voluptate reiciendis,
voluptas iusto dolorum fugiat excepturi dolor odio. Ab, itaque
blanditiis optio fugiat quod distinctio, necessitatibus aliquam porro
nulla, ratione quibusdam facere dolore! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Minima ut eveniet iste, voluptas molestias
aut corrupti amet autem officia, pariatur voluptatibus illum quae
necessitatibus non unde totam. Beatae, nam deserunt sunt nobis vitae ad
repellendus accusantium deleniti ut tempore corrupti illo nihil commodi
iure voluptate? Pariatur deserunt ratione quibusdam, reiciendis velit
magni.
</p>
</div>
<hr />
<div class="overflow hidden">
<h3>Overflow Hidden</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi
exercitationem facilis eos natus quod hic necessitatibus est mollitia id
ex maiores quae atque harum vitae accusantium voluptate reiciendis,
voluptas iusto dolorum fugiat excepturi dolor odio. Ab, itaque
blanditiis optio fugiat quod distinctio, necessitatibus aliquam porro
nulla, ratione quibusdam facere dolore! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Minima ut eveniet iste, voluptas molestias
aut corrupti amet autem officia, pariatur voluptatibus illum quae
necessitatibus non unde totam. Beatae, nam deserunt sunt nobis vitae ad
repellendus accusantium deleniti ut tempore corrupti illo nihil commodi
iure voluptate? Pariatur deserunt ratione quibusdam, reiciendis velit
magni.
</p>
</div>
<hr />
<div class="overflow scroll">
<h3>Overflow Scroll</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi
exercitationem facilis eos natus quod hic necessitatibus est mollitia id
ex maiores quae atque harum vitae accusantium voluptate reiciendis,
voluptas iusto dolorum fugiat excepturi dolor odio. Ab, itaque
blanditiis optio fugiat quod distinctio, necessitatibus aliquam porro
nulla, ratione quibusdam facere dolore! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Minima ut eveniet iste, voluptas molestias
aut corrupti amet autem officia, pariatur voluptatibus illum quae
necessitatibus non unde totam. Beatae, nam deserunt sunt nobis vitae ad
repellendus accusantium deleniti ut tempore corrupti illo nihil commodi
iure voluptate? Pariatur deserunt ratione quibusdam, reiciendis velit
magni.
</p>
</div>
<hr />
<div class="overflow auto">
<h3>Overflow Auto</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi
exercitationem facilis eos natus quod hic necessitatibus est mollitia id
ex maiores quae atque harum vitae accusantium voluptate reiciendis,
voluptas iusto dolorum fugiat excepturi dolor odio. Ab, itaque
blanditiis optio fugiat quod distinctio, necessitatibus aliquam porro
nulla, ratione quibusdam facere dolore! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Minima ut eveniet iste, voluptas molestias
aut corrupti amet autem officia, pariatur voluptatibus illum quae
necessitatibus non unde totam. Beatae, nam deserunt sunt nobis vitae ad
repellendus accusantium deleniti ut tempore corrupti illo nihil commodi
iure voluptate? Pariatur deserunt ratione quibusdam, reiciendis velit
magni.
</p>
</div>
<hr />
<hr />
<h2>Float</h2>
<p>
The float property specifies whether or not an element should float.
<br />
<b>Note: Absolutely positioned elements ignores the float property!</b>
</p>
<div class="float">
<h3>Float Left</h3>
<img src="./src/background.jpg" alt="" class="float-left" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
perspiciatis neque iste, debitis quae earum, dolore animi impedit
doloremque magnam officiis incidunt suscipit at. Asperiores sunt enim
nesciunt quam explicabo, laudantium esse doloremque consectetur, illum
libero excepturi quia ratione provident numquam? Maxime distinctio enim
quae. Voluptatibus, aperiam odit. Eius, tempora. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident consectetur veritatis ut
optio architecto recusandae pariatur amet cum, consequuntur magnam,
aliquam eaque molestias inventore earum nulla nihil vitae ipsam iusto.
Enim tempora nobis sapiente fugiat possimus consectetur, velit, esse
ipsa magni, doloribus nihil voluptates asperiores inventore sequi
numquam provident molestias nam rem cum vel. Necessitatibus nostrum
doloribus sint in voluptates. Vel optio similique sed, officia illum eum
a quis quisquam adipisci cupiditate vitae blanditiis inventore.
Molestiae, minus maiores! Sunt quia blanditiis omnis sequi reiciendis
quis obcaecati, iste necessitatibus sapiente quibusdam?
</p>
</div>
<hr />
<div class="float">
<h3>Float Right</h3>
<img src="./src/background.jpg" alt="" class="float-right" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
perspiciatis neque iste, debitis quae earum, dolore animi impedit
doloremque magnam officiis incidunt suscipit at. Asperiores sunt enim
nesciunt quam explicabo, laudantium esse doloremque consectetur, illum
libero excepturi quia ratione provident numquam? Maxime distinctio enim
quae. Voluptatibus, aperiam odit. Eius, tempora. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident consectetur veritatis ut
optio architecto recusandae pariatur amet cum, consequuntur magnam,
aliquam eaque molestias inventore earum nulla nihil vitae ipsam iusto.
Enim tempora nobis sapiente fugiat possimus consectetur, velit, esse
ipsa magni, doloribus nihil voluptates asperiores inventore sequi
numquam provident molestias nam rem cum vel. Necessitatibus nostrum
doloribus sint in voluptates. Vel optio similique sed, officia illum eum
a quis quisquam adipisci cupiditate vitae blanditiis inventore.
Molestiae, minus maiores! Sunt quia blanditiis omnis sequi reiciendis
quis obcaecati, iste necessitatibus sapiente quibusdam?
</p>
</div>
<hr />
<div class="float">
<h3>Float None</h3>
<img src="./src/background.jpg" alt="" class="float-none" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
perspiciatis neque iste, debitis quae earum, dolore animi impedit
doloremque magnam officiis incidunt suscipit at. Asperiores sunt enim
nesciunt quam explicabo, laudantium esse doloremque consectetur, illum
libero excepturi quia ratione provident numquam? Maxime distinctio enim
quae. Voluptatibus, aperiam odit. Eius, tempora. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident consectetur veritatis ut
optio architecto recusandae pariatur amet cum, consequuntur magnam,
aliquam eaque molestias inventore earum nulla nihil vitae ipsam iusto.
Enim tempora nobis sapiente fugiat possimus consectetur, velit, esse
ipsa magni, doloribus nihil voluptates asperiores inventore sequi
numquam provident molestias nam rem cum vel. Necessitatibus nostrum
doloribus sint in voluptates. Vel optio similique sed, officia illum eum
a quis quisquam adipisci cupiditate vitae blanditiis inventore.
Molestiae, minus maiores! Sunt quia blanditiis omnis sequi reiciendis
quis obcaecati, iste necessitatibus sapiente quibusdam?
</p>
</div>
<hr />
<div class="float" style="margin: 100px 0">
<h3>Float Inherit</h3>
<img src="./src/background.jpg" alt="" class="float-inherit" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
perspiciatis neque iste, debitis quae earum, dolore animi impedit
doloremque magnam officiis incidunt suscipit at. Asperiores sunt enim
nesciunt quam explicabo, laudantium esse doloremque consectetur, illum
libero excepturi quia ratione provident numquam? Maxime distinctio enim
quae. Voluptatibus, aperiam odit. Eius, tempora. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident consectetur veritatis ut
optio architecto recusandae pariatur amet cum, consequuntur magnam,
aliquam eaque molestias inventore earum nulla nihil vitae ipsam iusto.
Enim tempora nobis sapiente fugiat possimus consectetur, velit, esse
ipsa magni, doloribus nihil voluptates asperiores inventore sequi
numquam provident molestias nam rem cum vel. Necessitatibus nostrum
doloribus sint in voluptates. Vel optio similique sed, officia illum eum
a quis quisquam adipisci cupiditate vitae blanditiis inventore.
Molestiae, minus maiores! Sunt quia blanditiis omnis sequi reiciendis
quis obcaecati, iste necessitatibus sapiente quibusdam?
</p>
</div>
<hr />
<hr />
<h2>Clear</h2>
<div class="clear">
<h3>Clear Left</h3>
<img src="./src/background.jpg" alt="" class="clear-left" />
<img src="./src/background.jpg" alt="" class="clear-left" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
perspiciatis neque iste, debitis quae earum, dolore animi impedit
doloremque magnam officiis incidunt suscipit at. Asperiores sunt enim
nesciunt quam explicabo, laudantium esse doloremque consectetur, illum
libero excepturi quia ratione provident numquam? Maxime distinctio enim
quae. Voluptatibus, aperiam odit. Eius, tempora. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident consectetur veritatis ut
optio architecto recusandae pariatur amet cum, consequuntur magnam,
aliquam eaque molestias inventore earum nulla nihil vitae ipsam iusto.
Enim tempora nobis sapiente fugiat possimus consectetur, velit, esse
ipsa magni, doloribus nihil voluptates asperiores inventore sequi
numquam provident molestias nam rem cum vel. Necessitatibus nostrum
doloribus sint in voluptates. Vel optio similique sed, officia illum eum
a quis quisquam adipisci cupiditate vitae blanditiis inventore.
Molestiae, minus maiores! Sunt quia blanditiis omnis sequi reiciendis
quis obcaecati, iste necessitatibus sapiente quibusdam?
</p>
</div>
<hr />
<div class="exercise">
<h2>Exercise</h2>
<div class="box1">
<h2>CatCSS</h2>
<img src="./src/background.jpg" alt="cat in a box" />
<p class="first-paragraph">
Nap all day cat dog hate mouse eat string barf pillow no baths hate
everything but kitty poochy. Sleep on keyboard toy mouse squeak roll
over. Mesmerizing birds. Poop on grasses licks paws destroy couch
intently sniff hand. The dog smells bad gnaw.
</p>
</div>
<div class="box2">
<h2>DogCSS</h2>
<img src="./src/background.jpg" alt="dogs in a box" />
<p class="second-paragraph">
Heckin good boys and girls long woofer big ol wow very biscit long
woofer heck what a nice floof, long doggo noodle horse vvv very taste
wow. Very taste wow many pats aqua doggo he made many woofs pupperino,
puggo doing me a frighten.
</p>
</div>
</div>
<footer>Copyright. This is the footer</footer>
</body>
</html>