css/float_clear.html at master · MalikHamzaHanif/css · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float and clear in css</title>
    <style>
        div:first-child {
            border: 2px solid red;
            float: left;
        }
        p>img {
            /* float: left; */
            /* float: right; */
        }

        p {
            /* clear: both; */
        }
    </style>

</head>

<body>
    <div>div one</div>
    <div>div two Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat atque itaque dolore quo repudiandae,
        dolorem non sequi. Recusandae, placeat quam, minima tempora accusantium vitae dolorem aliquam illo quaerat
        ducimus voluptate.</div>
    <!-- <div>


        <p><img height="100" width="100"
                src="https://images.unsplash.com/photo-1530631673369-bc20fdb32288?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                alt="this is a iamge of a person swiming inside a pool">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur rem exercitationem porro vitae, accusamus
            labore explicabo quae ab sequi nesciunt architecto. Temporibus odit quisquam sequi adipisci iure commodi,
            eos ad!lorem100
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque impedit exercitationem facere alias
            nostrum animi expedita, quasi nisi aut obcaecati. Nemo odit placeat quisquam ipsam! Nisi aperiam asperiores
            quam.

        </p>
    </div> -->
</body>

</html>