-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS float and clear.html
43 lines (36 loc) · 3.54 KB
/
CSS float and 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float & Clear</title>
<style>
.cards {
border: 2px solid black;
display: flow-root;
}
img {
float: left;
}
.card {
border: 2px solid red;
}
.card:nth-child(3){
background-color: aqua;
clear: both;
}
</style>
</head>
<body>
<div class="cards">
<img src="OIP.jpg" alt="" width="230">
<div class="card">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente distinctio iure suscipit facilis dicta
minima unde ea quasi minus quaerat? Alias sequi inventore dolore aperiam, architecto saepe, doloribus
eos dolor ut iure autem commodi!</p>
</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis magnam aspernatur dolorum laudantium doloremque inventore amet iusto accusantium, distinctio corporis sed sequi molestias eius quibusdam nemo expedita illum! Delectus cum expedita unde animi et magni eius numquam consequatur incidunt ab tempore placeat ducimus atque consequuntur nulla id omnis quo debitis aliquid obcaecati nostrum, cumque accusamus ad molestiae. Tenetur in eius culpa similique fuga eaque! Iste maxime eum doloribus, dolore alias reprehenderit voluptates nobis debitis a perferendis enim perspiciatis totam, veritatis voluptate nesciunt odio saepe sed, commodi porro ex praesentium. Illo placeat suscipit consectetur, nam recusandae libero ea dicta voluptate sit. Tempore earum excepturi repudiandae facere accusantium aliquid officia, delectus neque explicabo dignissimos magnam, accusamus sequi veritatis fugiat at iste labore totam debitis iure sint adipisci ipsam blanditiis voluptatum. Exercitationem, qui repellat illum quibusdam aliquam debitis, nihil praesentium officia fuga nam voluptatem doloribus expedita omnis ipsa quaerat architecto sed aspernatur. Eum, libero culpa quas ullam sed repellat maiores. Modi non ea, expedita assumenda tenetur dolorum ex officia nostrum totam est fuga, deleniti perspiciatis corrupti sunt eos nisi! Suscipit repudiandae doloribus odio accusamus odit repellat harum totam numquam, illo nesciunt eius, labore nulla facere veritatis natus, molestias dignissimos explicabo facilis? Voluptas possimus quasi, quaerat, quibusdam est impedit sit voluptatem architecto incidunt ex reiciendis, nam ipsa iusto aperiam! Alias aperiam cum unde maxime consequuntur voluptatibus quidem. Assumenda corporis quod, maiores incidunt maxime animi itaque repudiandae minus at voluptatum minima in praesentium blanditiis alias sed ratione neque voluptas amet tempora! Debitis iure placeat neque sapiente vero distinctio voluptas dignissimos reiciendis, ipsam optio unde nostrum quisquam aliquid. Repellat eius cupiditate adipisci nesciunt, rerum, iste aspernatur officia similique velit harum, consectetur perspiciatis qui. Autem itaque, laudantium expedita voluptas iure error consequuntur nobis repudiandae aperiam facere explicabo tenetur in molestias laboriosam. Eligendi vitae, dolore cupiditate, quia recusandae ipsa et harum ratione porro quos ipsam velit illo corporis dolor, mollitia totam facere? Quia, repellendus ab aliquam cupiditate sunt sequi voluptatem. Ratione accusamus totam, culpa ipsa voluptatum soluta placeat eaque magni ad?</div>
<div class="card">Card 3</div>
</div>
</body>
</html>