21.Float.html

<!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 - Float</title>
    <style>

        .box {
            width: 40%;
            height: 200px;
            float: left;
        }

        .box-1 {
            background-color: blue;
        }
        .box-2 {
            background-color: red;
        }
        .box-3 {
            background-color: green;
        }
         .image1 {
            margin-right: 10px;
            float: left;
        }

        .image2 {
            margin-left: 10px;
            float: right;
        } 
    </style>
</head>
<body>

    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div style="clear:both"></div>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque quas quasi vel, quidem tempore deserunt fuga, deleniti officiis labore fugit perferendis assumenda facere, non nobis cum? Molestiae, perspiciatis. Officia incidunt consectetur quidem ratione ipsum voluptates quia doloremque. Vitae amet molestiae porro repellat corrupti, recusandae consequatur, rerum, aliquid minima temporibus eos? Reiciendis error ut recusandae cum quas voluptates aut, hic inventore rem tempore est, quos tenetur quod! Accusamus cum eum recusandae laboriosam voluptate id repellat quos dolorem temporibus optio, culpa nesciunt porro tenetur, exercitationem corrupti quidem nemo velit! Quidem magnam iure accusantium totam facilis ex nisi labore culpa quod, ad excepturi obcaecati minus voluptate vero veritatis, quis aspernatur. Et velit officiis natus fugit aperiam maiores temporibus necessitatibus placeat soluta corporis esse, eos iste quasi voluptatem nostrum quo beatae culpa repellendus sequi a at. Beatae magnam vero cupiditate explicabo unde. Modi commodi cum eos sequi obcaecati? Perspiciatis facilis assumenda, temporibus consequatur saepe tenetur voluptatum veritatis expedita voluptas eos distinctio modi voluptatem dolorem at quasi doloremque excepturi ad autem optio fugiat enim ducimus corrupti? Cumque, recusandae possimus? Laboriosam temporibus molestias quaerat neque veritatis libero consequatur ipsa soluta fuga. Quod vel ex distinctio reiciendis exercitationem adipisci magni fuga voluptate ipsa totam suscipit rem, id atque dolores porro dignissimos impedit ullam nam quia doloremque! Obcaecati, et dolorum quisquam quidem fuga rem illo dolore, nulla porro odit magni aliquam cum pariatur eos, ullam quasi laborum velit officiis sed. Nesciunt cumque ullam ipsa quasi consectetur architecto modi ad expedita suscipit! Vitae, ea excepturi, nihil eaque magnam odio quasi, delectus ullam ut nisi facilis! Veniam non delectus nesciunt neque exercitationem ea eaque atque laboriosam porro voluptate. Exercitationem quis aut quod dolorum ullam, iusto pariatur consequatur quos eos beatae! Illum eos consequuntur, eligendi culpa officiis modi corporis reiciendis ipsam aperiam laboriosam! Minus itaque ab in, quas veniam culpa dignissimos sequi excepturi, possimus dolorem, cum eos nulla nesciunt incidunt non dicta. Blanditiis reprehenderit consequuntur nemo fugit nisi aliquam impedit est quisquam animi ut eaque vitae necessitatibus non, distinctio deserunt iusto ullam doloribus. Saepe itaque assumenda fugiat impedit! Minima, corporis fugit soluta atque, quaerat illo blanditiis, nobis perferendis voluptatum fugiat id. Ut nemo deserunt minima repudiandae iure labore doloribus necessitatibus repellat nulla, est dicta? Et ad animi magnam nam similique iusto nihil quasi eveniet ipsam earum quibusdam fuga, sit dolorum velit voluptate ex, voluptas, nulla iure rem alias eos fugiat qui quia. Vel incidunt labore neque quia, similique itaque sequi molestiae iure, distinctio nisi doloremque perferendis error dicta est voluptates, accusantium nulla rem inventore pariatur mollitia nemo velit. A optio cum voluptatum fuga cupiditate deserunt aliquam doloribus vel eligendi. Explicabo odio nulla aspernatur placeat iusto nisi unde atque tempore dicta accusamus provident sed pariatur cum, hic natus quidem illum, minima eaque sequi accusantium omnis similique officiis. Nostrum, voluptatum est! Delectus odit, reiciendis laudantium nisi aliquam, est dolorum nostrum quibusdam maiores non aliquid veniam voluptatum similique saepe corporis asperiores. Nam, laudantium voluptatibus ipsa pariatur illo quisquam blanditiis sed provident quae nostrum deleniti dolorem soluta minima excepturi iusto quam dolore aliquid. Quo, aliquam.</p>

    <!-- <img class="image1" src="https://fotolifeakademi.com/uploads/2020/04/sabit-odakli-objelerden-yararlanin.jpg" alt="">
    <img class="image2" src="https://fotolifeakademi.com/uploads/2020/04/sabit-odakli-objelerden-yararlanin.jpg" alt="">
    <div style="clear:both"></style>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi voluptatem inventore quam quaerat asperiores magnam necessitatibus nostrum totam voluptatum quasi, sequi, distinctio rerum. Perspiciatis eaque culpa tenetur ea sapiente, molestias necessitatibus a dicta voluptas assumenda rerum, voluptatibus neque officia eum consequatur expedita quaerat iusto voluptates. 
        Culpa ex quam quae neque voluptates sint repellendus dicta, nam at repudiandae voluptas accusantium, iure libero, maxime incidunt. Eveniet ratione rerum nulla cumque porro voluptate, tenetur culpa distinctio? Minus dicta in magni dolorum quibusdam eum est laudantium tempore harum molestias! Obcaecati in possimus, nostrum quos quas ipsam odit similique fuga consectetur delectus incidunt, voluptatem totam dicta recusandae ut eligendi nisi commodi ab placeat earum dolor neque itaque inventore. 
        Nihil debitis, incidunt eos, dolor vitae maiores ullam magni 
        distinctio nam nesciunt sed veniam temporibus sequi repellat 
        rerum eius libero esse ea. Deleniti illum animi laborum similique!
         Veritatis minus quibusdam necessitatibus. 
         Quod libero ab reprehenderit minus mollitia nostrum aliquid minima sint quae voluptatum hic aspernatur dolor rem eum, ratione voluptatem quos adipisci! Aut repellat necessitatibus excepturi pariatur sequi neque nostrum dolore sunt, temporibus cum in iusto ullam quidem saepe deserunt quia officia. Tempora mollitia ipsa quis velit rem possimus, quas tenetur voluptas quibusdam cum. Voluptate sint, quia maiores blanditiis nesciunt reiciendis veritatis dolores impedit nisi aut doloribus error porro culpa sed fugit dolor earum nemo! Animi excepturi, reprehenderit accusamus, placeat repellendus dicta repellat sunt vero sit fuga quisquam corporis voluptates obcaecati, similique esse architecto culpa consequuntur? Nostrum voluptate dignissimos minima mollitia suscipit ex nulla, consequatur odio nesciunt repudiandae est quo voluptatibus, architecto pariatur sapiente voluptatum? Porro nemo aperiam eius debitis vitae commodi ea ullam! Minus earum ut magni assumenda accusamus expedita in pariatur illo distinctio corporis, ad tenetur voluptate amet dolore deleniti perferendis mollitia sint tempora, vero optio at ipsum quos vel id. Omnis suscipit tenetur dicta!
    </p> -->
</body>
</html>