CSS파트 claerfix질문

강의중 clearfix div를 넣어주는데
제가 그게 왜들어가는지 들어가서 무슨작용을 하는지
원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요?
못난 제자라 죄송합니당 ㅜㅜ

html:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-02-clear</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box1 box">
        첫번째 박스입니다.<br>
        float:left가 적용되어 있습니다.
    </div>
    <div class="box2 box">
        두번째 박스입니다.<br>
        float:right가 적용되어 있습니다.
    </div>
    <div class="clearfix"></div>
    <div class="box3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. 
        Vivamus cursus lectus tincidunt tellus tincidunt pharetra.
         Donec pharetra dictum malesuada. Fusce non sapien egestas, 
         maximus urna vel, pulvinar magna. 
         Aenean ut dapibus lacus, in blandit ligula. 
         Vestibulum sit amet efficitur tortor. 
         Phasellus id viverra felis. Mauris magna est,
          luctus sit amet neque et, sagittis ultrices elit. 
          Morbi odio eros, finibus non justo eget, 
          sollicitudin dapibus ante. 
          Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. 
          Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. 
          Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. 
          Fusce in eros blandit, vehicula libero et, euismod enim.
    </div>
</body>
</html>

css:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    background-color: #eeeeee;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

.wrapper {
    width: 620px;
    padding: 40px 30px;
    background-color: white;
    border: 1px solid gray;
    border-radius: 10px;
}

.wrapper__head {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px dashed gray;
}

.wrapper__head__title {
    font-size: 32px;
    background-color: orange;
    color: white;
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
}

.wrapper__head__sub-title{
    font-size: 18px;
    padding: 10px 0;
}

#point {
    color: orange;
    font-size: 22px;
    font-weight: bold;
    text-decoration: underline;
    display: block;
    margin-top: 15px;
}

.wrapper__body {
    border: 1px solid #dddddd;
    padding: 20px 30px;
}

.diary-title {
    font-size: 18px;
    font-weight: 600;
    background-color: #f4f4f4;
    margin-bottom: 20px;
}

.kimchi {
    color: red;
    font-weight: 600;
}

.egg {
    color: orange;
    font-weight: 600;
}

.highlight {
    font-size: 22px;
    color: blue;
    font-weight: 700;
    font-style: italic;
}

.diary-date {
    color: #919191;
    font-size: 14px;
    text-align: right;
}

.header {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid gray;
}

.header-inner {
    width: 900px;
    height: 100%;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 100px;
}

.logo h1 a{
    text-decoration: none;
    color: orange;
}

.menu__ul {
    display: flex;
    flex-direction: row;
    
}

.menu__ul li {
    list-style: none;
    
}

.menu__ul li a{
    display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/
    padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/
    text-decoration: none;
    color: black;
}

.menu__ul li a:hover{
    color: orange;
}


.user {
    width: 100px;
}

안녕하세요, 인프런 AI 인턴이에요.

clearfix는 주로 부모 요소 안에 float 속성을 가진 자식 요소들이 있는 경우 사용됩니다. float 속성을 사용하면 부모 요소는 자식 요소들의 높이를 제대로 계산하지 못하게 됩니다. 이때 clearfix를 사용하면 부모 요소가 자식 요소들의 높이를 제대로 인식할 수 있게 됩니다.

clearfix는 보통 다음과 같은 CSS 코드로 구현됩니다.

.clearfix::after {
content: “”;
display: table;
clear: both;
}

해당 요소의 가상 요소인 “::after”를 사용하여 빈 내용을 추가하고, display 속성을 “table”로 설정하여 가상 요소를 테이블 형식으로 표시하고, clear 속성을 “both”로 설정하여 float 속성을 가진 요소들의 영향을 받지 않도록 합니다.

이렇게 clearfix를 사용하면 부모 요소가 자식 요소들의 높이를 제대로 인식할 수 있고, 예기치 않은 레이아웃 오류를 방지할 수 있습니다.

자세한 내용은 인프런에서 제공하는 CSS 강의를 참고하시면 좋을 것 같아요. 더 궁금한 점이 있으시면 언제든지 물어보세요!

인프런 커뮤니티 질문&답변