DEV Community

Dahye Ji
Dahye Ji

Posted on

CSS basic 5 - Position, Float, CSS drawing

Position

position is css property that sets how an element is positioned in a document. The top, right, bottom and left properties determine the final location of positioned elements.

  • static: The element is positioned relative to its normal flow(normal position). This is the default value. Static positioned elements are not affected by the top, bottom, left, and right properties.
  • relative: The element is positioned according to the normal flow of the documents, and then offset relative to itself on the values of top, right, bottom and left. The offset(top, right, left, bottom) does not affect the position of any other elements.
  • absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closet positioned ancestor, if any; otherwise, it is placed relative to the initial containing block(usually body)
  • fixed: The element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
  • sticky: The element is positioned based on the user's scroll position.

Static, Relative, Absolute

<!DOCTYPE html>
<html lang="ko">

<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>relative</title>
    <style>
        .box1 {
            position: static;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
        }

        .기준 {
            position: relative;
        }

        .box2 {
            /*  */
            position: absolute;
            /* position: relative; */
            left: 40px;
            /* right: 40px; */
            top: 30px;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
            z-index: 2;
            /* z-index:0 원래 있어야 할 자리 */
            /* z-index:1 원래 있어야 할 자리보다 앞으로 */
            /* z-index:-1 원래 있어야 할 자리보다 뒤로 */
            /* z-index: 0; */
        }

        .box3 {
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: aqua;
            color: white;
            width: 100px;
            height: 100px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="box1">box1</div>
    <div class="기준">
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
    <!-- <div class="box2">box2
        <div class="box3">box3</div>
    </div> -->

    <!-- <div class="box3">box3</div> -->

    <!-- <div class="face">
        <div class="eye"></div>
        <div class="nose">
            <div class="mustache"></div>
        </div>
    </div> -->

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Fixed

<!DOCTYPE html>
<html lang="ko">

<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>position - fixed</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .nav {
            position: fixed;
            padding: 10px;
            background: #4267B2;
            color: white;
            font-weight: 700;
            font-size: 30px;
            line-height: 50px;
            width: 100%;
            height: 60px;
        }

        .container {
            margin-top: 0;
            padding-top: 120px;
            margin-left: 100px;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <div class="nav">facebook</div>
    <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo maxime quas porro reiciendis, molestias natus
            accusantium, blanditiis repudiandae obcaecati deleniti adipisci. Velit totam hic reiciendis temporibus,
            obcaecati necessitatibus. Autem, commodi?
            Minus ea animi excepturi, magni commodi obcaecati ipsum. Deleniti ipsum, maiores dolorum eaque nihil, hic
            dolorem perferendis ipsam reiciendis fuga laboriosam? Similique delectus consectetur eius doloremque
            temporibus quos minima eveniet.
            Recusandae in fugit ad provident quaerat illum aspernatur voluptatum repellat, praesentium ex aut! Quaerat
            molestias voluptatem ratione voluptates rem ex voluptas reiciendis nobis in id placeat aperiam, ut quasi
            repudiandae.
            Sint magni suscipit dicta voluptatum, soluta in exercitationem tempore minima modi, quos tenetur cumque
            aperiam ad facilis necessitatibus possimus, repellat dolores voluptates minus. Molestias fugit perspiciatis
            velit cumque porro sit!
            At, provident corporis cum reiciendis odit distinctio repudiandae tenetur consectetur eaque dolorem
            voluptate iusto sed beatae molestias, error non aperiam quibusdam ullam! Reiciendis doloremque sunt minima
            velit ullam voluptatem assumenda?
            Commodi nulla adipisci quasi magnam exercitationem quis nihil? Cumque nam dolorem repudiandae alias debitis
            sunt deleniti possimus deserunt non? Alias officia atque unde quae aspernatur rerum fuga sunt tenetur
            consequuntur?
            <br><br>
            Natus, ad. Quaerat eaque in dolorem? Obcaecati ab iusto non reprehenderit? Consequatur obcaecati facere
            assumenda, sequi distinctio possimus fuga exercitationem nam. Ipsam, vitae. Quos aspernatur quis cumque hic
            earum ipsa.
            Sed id ea magnam aut consequuntur natus odio corrupti voluptatem hic? Repellat minima accusamus at
            laudantium provident animi illo officiis? Tenetur et eos, excepturi minima nobis quia assumenda voluptatem
            aut?
            Porro ad eos maiores, doloribus, laborum debitis dolores mollitia id inventore laudantium explicabo, dolore
            tenetur sint. Omnis distinctio hic, sint ullam alias, similique sit dolor libero saepe molestias at quod!
            Dolorem necessitatibus ab ipsa, culpa explicabo vero perspiciatis id illum. Doloribus minima unde
            accusantium saepe in architecto recusandae iusto, cum praesentium labore hic temporibus voluptatibus eius,
            vel dolores facilis nostrum!
            A, ullam obcaecati! Ut assumenda ratione temporibus quasi autem hic amet eaque eos incidunt neque eveniet,
            ipsam ad perferendis provident. Nam, iste dolores. Amet corporis iusto quos quasi voluptates! Porro!
            Laboriosam sed earum officiis? Repudiandae, iste veniam omnis provident odio doloribus minus? Porro
            distinctio nemo provident vero fuga voluptate, corporis quisquam alias tenetur, praesentium numquam vitae
            fugiat laudantium soluta? Consequuntur!
            Id, labore consectetur culpa excepturi commodi vero sapiente porro quidem nesciunt, fuga quas quos veritatis
            sed impedit eveniet odit deserunt dolore enim fugit exercitationem error. Aperiam nam enim dignissimos ab?
            <br><br>
            Eius hic alias quis facilis dolore debitis adipisci? Sint tempora officiis distinctio esse eaque quis
            blanditiis quos necessitatibus, mollitia, minima aut beatae quidem. Quis quidem veniam, qui aut soluta
            culpa?
            Alias non distinctio dicta nulla provident molestiae molestias dolorem placeat deleniti explicabo quaerat,
            dolor rem voluptas praesentium laborum? Repellat et nobis, reprehenderit vitae ipsum officia natus accusamus
            dolorem iure est.
            Facilis suscipit mollitia minima ipsum excepturi, nisi eum cumque aperiam veniam harum corporis, quasi ipsa
            ad nemo dolores nam architecto! Veniam dolores velit iste, praesentium dolor aut suscipit optio vero!
            Accusantium maiores quia minus distinctio dicta dolorem assumenda, nostrum exercitationem reiciendis sit
            fugit nulla hic explicabo velit nam vel cupiditate voluptate sint maxime porro soluta obcaecati praesentium
            quasi? Esse, magni?
            Similique vero possimus explicabo, hic unde perspiciatis corporis, voluptatum odio error ratione assumenda
            impedit! Nobis nam totam ipsam, soluta explicabo iusto! Animi incidunt sit cumque corrupti voluptatum itaque
            aspernatur ipsum?
            Voluptates amet similique nulla sint illum nesciunt aspernatur voluptatibus sunt! Esse facere officiis
            temporibus! Delectus non in excepturi illum sapiente voluptatum explicabo! Fugit corrupti similique
            aspernatur perferendis. At, eligendi recusandae?
            Quas a cumque esse, at, numquam vitae officiis voluptatem natus distinctio labore eveniet quibusdam ducimus
            sed odio cupiditate facilis ab provident incidunt? Voluptatem sit enim dolorem a rerum. Ipsam, vitae.
            Totam laboriosam corporis, nisi illo voluptatum nam, aut dolore fuga debitis quia earum inventore similique
            dolores esse voluptate deleniti recusandae. Iste veniam in explicabo atque error vitae unde voluptatum?
            Asperiores?
            <br><br>
            Veniam ea qui possimus. Quisquam, dolore dolorem consequuntur nulla, porro, debitis neque qui minus vero
            aliquid impedit voluptate modi autem est beatae commodi distinctio nostrum at voluptas reprehenderit.
            Sapiente, quibusdam.
            Blanditiis consequuntur iste sunt, ex quis labore quaerat ratione ullam aspernatur maiores vero nesciunt
            quae, nemo perferendis repellat facilis magnam dolor rem odio beatae. Expedita praesentium vel sit nisi
            alias.
            Vitae quod voluptatum porro non temporibus dignissimos magni illo quasi quidem, ab consequatur blanditiis
            totam asperiores eum, quam officiis. Maiores temporibus fugiat voluptatibus aliquam? Delectus, praesentium
            reiciendis! Magni, fugiat nisi!
            Molestiae, totam vero excepturi ullam voluptatem corporis obcaecati vitae amet porro labore necessitatibus
            praesentium asperiores repudiandae, blanditiis, sunt assumenda eligendi! Consequatur delectus ad officia
            ducimus hic esse ipsum quisquam dolores!
            Excepturi voluptas, non modi vel soluta asperiores nisi fuga dicta molestias ducimus accusantium quos porro,
            repudiandae neque nesciunt. Exercitationem, quos accusamus? Fugit vel error iusto ab deleniti harum totam
            quia.
            Omnis culpa molestiae tempore deleniti quos tenetur. Delectus tempore consequatur mollitia, omnis autem
            iusto? Commodi corporis reprehenderit officia saepe sequi, eveniet eos odio, doloribus quisquam dolores illo
            rerum dolorem error.
            Odio est iste esse vero quis molestiae alias voluptates libero, excepturi fugit, autem, commodi quasi et. At
            ab laboriosam, omnis et quod dolorum officia quam adipisci! Eaque iste reprehenderit accusamus.
            Laborum tempora ipsum unde exercitationem a consequuntur quaerat velit explicabo. Ipsa ut deserunt hic
            consequatur autem voluptatum, numquam id! Velit modi asperiores nihil molestias obcaecati neque in harum
            quae tempora.
            Molestias accusantium eum itaque laborum eius tempora excepturi est magni quia iusto velit ratione incidunt
            optio illum quos tenetur deleniti, quae minus ab, sunt earum eos quas quasi. Quasi, tempora.
            Sapiente sit quaerat ducimus enim nulla earum, voluptates aut harum. Minus ad totam a eligendi voluptas non
            illo eaque quo, maiores nostrum, sapiente necessitatibus enim odio praesentium voluptatem cum accusamus?
            Consequuntur esse, quam et modi accusantium dolore facere hic at aliquam saepe pariatur nulla animi
            aspernatur non veniam impedit laboriosam ducimus architecto, quos velit neque, nemo fugiat nihil! Magnam,
            atque!
            Corporis illo laudantium dolore aspernatur natus hic delectus alias magnam maiores omnis. Dolore soluta illo
            qui, numquam ea quod recusandae quia laudantium necessitatibus nesciunt inventore voluptatibus perspiciatis
            quasi ipsam quam.
            Aut tempore quidem minima sit maiores reprehenderit adipisci ut perferendis temporibus nihil, facilis, est
            possimus dolorum. Mollitia tempore vitae debitis nobis, odit nulla nostrum perferendis minus dolores
            corrupti, sapiente quae.
            Mollitia, veniam unde! Ullam, sequi repellat totam facere veniam, at quia, praesentium magnam voluptas ab
            quidem? Tempore nisi quos voluptatibus repudiandae harum sunt, minus illum. Nisi corrupti sint illum
            obcaecati?
            Impedit, neque enim. In quia dolores quisquam pariatur dicta quo reiciendis laboriosam commodi perferendis
            facilis, totam hic quos eligendi voluptatibus? Eius quisquam odit dolorem nam eum similique in hic
            repudiandae!
            Rem sint velit distinctio delectus maxime amet corrupti possimus illo eligendi, dolore nulla rerum soluta
            magni quod quis ipsum. Atque iste nulla itaque beatae quaerat hic molestiae ex! Excepturi, doloribus!
            <br><br>
            Unde suscipit, explicabo, similique praesentium numquam, laudantium ad eos libero ipsam enim labore hic! A
            eveniet impedit corporis? Sunt consectetur quasi repellendus pariatur consequuntur laboriosam sequi
            accusamus, asperiores aspernatur veritatis?
            Laboriosam quod, cum praesentium consequatur eius odit placeat ullam harum at qui rem velit aspernatur
            aliquid. Eaque, ea nulla soluta harum minus animi aut, necessitatibus nostrum, non voluptatibus similique
            dolor?
            Harum fuga, voluptatum, unde cum veniam soluta eligendi commodi nostrum corrupti libero neque odit dolorum
            doloremque illo omnis nisi. Consectetur nesciunt quod quo tempore deserunt explicabo nemo neque similique.
            Dolorum.
            Eum doloribus laborum iusto ducimus nam, optio illum autem animi pariatur repellendus, suscipit vitae ad
            nisi rerum dolorum quis iste commodi, sed possimus. Iste fugiat debitis numquam maxime molestias. Molestias!
            Delectus voluptate iste vel ipsa expedita dolorem dolore soluta aperiam, rem quaerat beatae modi, totam
            officia, laudantium earum repellendus! Rem officia perspiciatis totam. Nam, provident hic aspernatur dolorum
            doloremque autem.
            Ipsam reiciendis expedita doloribus similique necessitatibus beatae inventore, provident modi, nisi quis
            commodi sequi odio ut nobis obcaecati incidunt? Eligendi ullam maiores aut facere esse nemo aliquam quae
            nisi. Nobis?
            <br><br>
            Illo, consequatur. Corporis fugit facilis nostrum dignissimos quae nulla dolore cupiditate, dolores eius
            quibusdam similique odit? Quae cum, eveniet quasi velit obcaecati nisi libero ad! Quibusdam commodi nobis
            consequatur tempore!
            Aut optio quos dolor error, deserunt vitae quia illo quisquam at autem labore impedit placeat mollitia
            neque. Excepturi, deleniti tenetur ad ab tempora sit numquam, vero similique minus facilis nemo.
            Adipisci, alias perferendis! Tempore enim vitae eveniet accusantium ipsam error consequatur itaque
            architecto ab at ea nemo, dicta, ullam atque praesentium voluptatibus eaque, nihil quia. Officiis ad dolor
            molestias itaque.
            Veritatis alias numquam pariatur quaerat odit, tenetur, accusamus, eaque reprehenderit in expedita harum?
            Eos ea repellat impedit ipsa in delectus dolore nihil ducimus eveniet reiciendis possimus molestiae,
            blanditiis, asperiores officia.
            Voluptatibus dolorem placeat laboriosam quod fugit repellendus, dolores veniam magni distinctio consectetur
            delectus animi vel officia soluta ad voluptas molestias commodi cupiditate atque nemo quasi? Deserunt
            incidunt recusandae numquam rerum?
            Autem, consequuntur officiis? Vitae, quo quia et similique quos facere saepe dicta aut fugiat fuga dolore
            rem iure molestiae nihil esse voluptatem eius neque voluptate deserunt laboriosam nesciunt. Laudantium,
            alias!
            In blanditiis facere unde neque odio aspernatur sequi minus ullam placeat dolorem omnis voluptas recusandae
            eius soluta, dolore sint perspiciatis laudantium reprehenderit excepturi porro? Minima qui harum esse
            temporibus nihil?
            Laboriosam, rem! Natus ab nihil aliquid dolorum amet veritatis unde, molestiae veniam reprehenderit eius
            voluptatibus facilis earum obcaecati ex dolores quis nisi quibusdam quia nostrum asperiores totam adipisci,
            laudantium ipsa.
            Quae, quos nemo vel suscipit ullam obcaecati, quas earum alias ab deleniti nam sapiente nulla unde sit omnis
            aliquid nobis provident necessitatibus voluptates placeat soluta magni minus, iste ex. Reiciendis?
            Inventore eveniet nostrum amet dolor iure repellendus qui autem alias, illum deleniti cum. Quia non placeat
            qui possimus incidunt atque, mollitia repellendus optio distinctio harum, dolorem minima, deserunt saepe
            iste!
            Consequatur cumque aliquid earum autem ex eaque vel dolore reprehenderit mollitia, sit incidunt fugiat odio,
            ullam dolorum quaerat maiores dolor? Quibusdam voluptatibus ad mollitia numquam fugit vero autem, laboriosam
            placeat?
            Ut optio dicta est non. Ea perspiciatis eius itaque quod ullam repellat doloremque sint autem corporis
            harum! Voluptates dolores nisi numquam odit optio maxime, veniam blanditiis neque, beatae ea totam.
            Voluptates, provident obcaecati! Quo corrupti aperiam adipisci obcaecati eum nesciunt ducimus dicta, alias
            similique laudantium architecto eos, amet, at neque. Harum, mollitia! Quas recusandae iure praesentium
            voluptate, voluptates voluptatum repellat.
            Accusantium ratione, harum dolor voluptate ipsum officia iusto, eveniet hic in saepe provident quia ab.
            Tempore quos praesentium ab quia nemo laboriosam, fugit optio! Ab ducimus iste expedita voluptatem
            praesentium.
            Quo molestiae voluptate hic? Culpa quod similique recusandae quis laborum maiores, veniam asperiores
            reprehenderit est, sit vitae alias ipsum minima dolorum facere dicta mollitia adipisci error vero quasi
            officia blanditiis.
            Facilis iusto commodi, nostrum in temporibus eum omnis! Ullam voluptatem natus exercitationem voluptatibus
            veritatis praesentium inventore amet expedita corrupti, possimus quia doloremque fugit porro modi ducimus,
            nostrum voluptas voluptates quos.
            Nemo, nulla! Fuga voluptate necessitatibus molestias accusantium repellendus harum animi obcaecati nemo,
            expedita explicabo nesciunt quaerat dicta reiciendis illum totam, quos sit placeat quo saepe officiis
            doloribus eaque? Ad, sapiente.
            Reprehenderit officia saepe explicabo eaque magnam beatae fugiat consectetur delectus? Sunt voluptate
            officia magni enim aperiam sequi magnam eos autem fugiat omnis consectetur, distinctio itaque quo veniam
            architecto at et.
            Mollitia cupiditate suscipit facere dignissimos eum doloremque, quisquam molestias sit dolores, adipisci
            odio quibusdam deserunt neque, natus nostrum! Repellendus cumque consequatur consequuntur atque tenetur
            repudiandae optio laudantium! Earum, voluptatibus magnam.
        </p>
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Sticky

<!DOCTYPE html>
<html lang="ko">

<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>position - sticky</title>
    <style>
        body {
            height: 500px;
            background: lightblue;
        }

        .other {
            height: 1000px;
            background: yellow;
        }

        .other2 {
            height: 1000px;
            background: black;
        }

        .stiky {
            position: sticky;
            width: 50px;
            height: 50px;
            background: pink;
            top: 10px;
        }
    </style>
</head>

<body>
    <div class="other">
        <div class="stiky"></div>
    </div>
    <div class="other2"></div>

</body>

</html>
Enter fullscreen mode Exit fullscreen mode

z-index

z-index sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

z-index:0

Where it supposed to be

z-index:1 (positive)

One layer up from where it supposed to be

z-index:-1 (negative)

One layer behind from where it supposed to be
(Negative values to lower the priority)

Transform

<!DOCTYPE html>
<html lang="ko">

<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>transform</title>
    <style>
        .one {
            border: darkgoldenrod solid 5px;
            border-radius: 30px;
            background: chocolate;
            height: 100px;
            width: 200px;
            /* If you are drawing something, it's better to use box-sizing: border-box; */
            box-sizing: border-box;
            text-align: center;
            line-height: 80px;
            color: white;
            font-size: 28px;
            transition: all 1s;
        }

        .one:hover {
            background: teal;
            transform: rotate(90deg) scale(2);
        }

        .two {
            border: solid 5px darkgoldenrod;
            border-radius: 30px;
            background: chocolate;
            height: 100px;
            width: 200px;
            box-sizing: border-box;
            text-align: center;
            line-height: 80px;
            color: white;
            font-size: 28px;
            transition: all 1s;
        }

        .two:hover {
            background: teal;
            /* transform: skew(30de,20deg) scale(2); */
            transform: translate(100px, 200px);
        }
    </style>
</head>

<body>
    <div class="one">Click!</div>
    <br>
    <div class="two">Click!</div>
    <br>
    <div class="three">Click!</div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Draw Character in CSS - Drawing my own character

There was a challenge to draw our own character using what we've learnt about position. This is what I've done!
Image description
My code

Float

Float is a CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow.

Image description

  • float:left The element must float on the left side of its containing block.
  • float:right The element must float on the right side of its containing block.
<!DOCTYPE html>
<html lang="ko">

<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>float</title>
    <style>
        img {
            width: 200px;
            float: right;
            /* float: left; */
        }
    </style>
</head>

<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/235B2F485958F12129" alt="">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur
    recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores? Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Ab aliquid officiis, at fugiat ratione expedita vel tenetur facere
    suscipit
    aut earum magnam in? Nihil perspiciatis laudantium minus officiis voluptatum cumque.
    Veritatis ea, fugit tenetur ex fugiat magnam odio dicta! Ex quo commodi qui nesciunt harum voluptas iusto officiis
    tempora porro ipsam nemo quas, atque pariatur minus ab praesentium nihil! Praesentium!
    Laboriosam at itaque adipisci, consequuntur quaerat quisquam dicta eum similique quia ex. Amet minus expedita dolor
    officiis ipsam exercitationem non, repellendus quaerat perspiciatis doloribus beatae iusto rem minima aut ut.
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Problem of float

When children elements all have float property, parent element does not apply the height of children and only takes what parent has for the height. It makes children element to be left outside.

Example of the issue as above

<!doctype html>
<html>
<head>
<style>
    .wrap{
    border: 4px solid blue;
    }
    .content{
    float: left;
    margin: 5px;
        height: 20px;
        border: 2px solid green;
    }
</style>
</head>
<body>
        <div class="wrap">
            <div class="content">내용1</div>
        <div class="content">내용2</div>
        </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Solving problem of float

There are a few ways to solve the problem.
1.Giving overflow to parent element.
overflow is used when element's content is too big to fit in.
If you use overflow, it extends the height of parent element so that child element can fit in parent element.

.wrap {
    border: 4px solid blue;
    overflow: hidden; 
}
Enter fullscreen mode Exit fullscreen mode

2.Specify height of parent element.

.wrap {
    border: 4px solid blue;
    height: 35px;
}
Enter fullscreen mode Exit fullscreen mode

This will work but specifying parent element is not a good practice because when height of child element get changed or another child element get added, the height of parent element needs to be changed but it's not practical if you have to change the height all the time when it gets changed.
3.Use 'clear'
Give clear property to the sibling element that is right next to the one that has float property.

<div class="first"></div>
<div class="second"></div>
Enter fullscreen mode Exit fullscreen mode
div{
  width:100px;
  height:100px;
  background-color:black;
}
.first{
  float:left;
}
.second{
  clear:both; /* both 속성은 left, right 둘 다 클리어 합니다. */
  background-color:pink;
}
Enter fullscreen mode Exit fullscreen mode

4.* Clear-fix *
Solve it with ::after (pseudo element)
Add pseudo element as the last child to the parent element. So make the parent element to recognise the children elements.
This is called clear-fix.

<!DOCTYPE html>
<html lang="ko">

<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>float</title>
    <style>
        /* float 해제하는 여러가지 방법들 */

        /* ul {
            overflow: hidden;
            display: inline-block;
        } */


        /*
        clear-fix
        부모요소에 after 사용. => 가장 마지막 자식요소로 가상요소를 만듦
        (before는 가상의 자식요소를 만드는데, 가장 첫 번째 자식요소로 가상요소를 만듦)
        현업에서는 clear-fix 라는 클래스를 만들고 (유틸리티 클래스)
        부모 요소에 클래스로 집어넣어서 적용 많이 한다고 함.. 
        */
        ul::after {
            display: block;
            content: '';
            clear: both;
        }

        li {
            float: left;
            width: 300px;
            height: 100px;
            background: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Float Practice - cloning Naver Login UI

Image description

My code for the UI above

<!DOCTYPE html>
<html lang="ko">

<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>Naver Login (네이버로그인) UI</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        section {
            width: 350px;
            height: 135px;
            background: #f6f9fa;
            border: 1px solid #c7d6db;
            margin: 0 auto;
            margin-top: 50px;
        }

        article {
            padding: 15px;
        }

        p {
            font-size: 12px;
            margin-top: 0;
            color: #4f4e4e;
        }

        button {
            background: #17ce5f;
            border: none;
            color: white;
            width: 100%;
            height: 50px;
            border: 1px solid #10bc52;
            border-radius: 2px;
            margin: 12px 0;
        }

        .logo {
            width: 68px;
            line-height: 18px;
            vertical-align: middle;
            margin-right: 2.4px;
        }

        .login-text {
            font-size: 14px;
            font-weight: 700;
            line-height: 18px;
            vertical-align: -2.4px;
        }

        ul {
            padding: 0;
            margin: 5px 0 0 0;
        }

        li {
            list-style: none;
        }

        .find {
            float: left;
        }

        .find li {
            display: inline-block;
        }

        .join {
            float: right;
        }

        .small {
            width: 10px;
        }

        a {
            text-decoration: none;
            font-size: 13px;
            color: #4f4e4e;
        }

        span[class=circle] {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background-color: #cdd2d6;
            display: inline-block;
            vertical-align: middle;
            margin: 0 2px;
        }
    </style>

<body>
    <!-- 네이버 로그인 부분 UI 만들기 -->
    <section>
        <article>
            <p>네이버를 더 안전하고 편리하게 이용하세요</p>
            <button>
                <img class="logo" src="icon/title.png" alt="">
                <span class="login-text">로그인</span>
            </button>
            <ul class="find">
                <li>
                    <img class="small" src="icon/lock.png" alt="">
                    <a href>아이디</a>
                </li>
                <li><span class="circle"></span></li>
                <li class="password"><a href>비밀번호찾기</a></li>
            </ul>
            <ul class="join">
                <li>
                    <img class="small" src="icon/user.png" alt="">
                    <a href>회원가입</a>
                </li>
            </ul>
        </article>
    </section>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)