Float

html요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만드는 속성

현재 웹페이지의 레이아웃을 작성할때 자주사용

 

left 자신포함 블록의 좌측에 있음

 

right 자신포함 블록의 우측에 있음

 

none 아무것도 없음

 

inline-start 자신포함 블록의 시작 쪽에 있음

 

inline-end 자신포함 블록의 끝쪽에 있음

 

clear:both;

float속성 영향을 받지 않도록 하기 위해사용한다 

 

overflow

html요소가 자신을 감싸고 있는 컨테이너 요소보다 크면 해당요소의 일부가 밖으로 흘러넘친다

overflow: auto를 하면 자동으로 내부요소 감쌀만큼 커진다

 

 

html

<nav>
        <ul>
            <li>nav</li>
            <li>nav</li>
            <li>nav</li> 
            
        </ul>
    </nav>

    <section>
          <h2>section 태그입니다</h2> 
        <h4>float: left를 해주었습니다</h4>
    </section>
    
    <article>
        <h2>article 태그입니다</h2> <br>
          <h3>  margin-left: 280px;
            를 주었습니다
        Lorem ipsum dolor sit amet 
        consectetur adipisicing elit. 
        Aliquid modi ab facilis tempora culpa,
         incidunt sequi labore obcaecati,
          maxime, debitis vel voluptate repellat
        </h3>
        </article>

    <footer>footer 태그입니다</footer>
</div>
</body>

 

 

css

nav{
    border: 2px solid skyblue;
}

ul{
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
}

section{
    float: left;
    border: 2px solid black;
   padding: 10px;
    width:367px
}

article{
    margin-left: 390px;
    border: 2px solid rgb(2, 116, 0);
    padding: 20px;
}

footer{
    clear: both;
    text-align: center;
    background-color: lightgray;
    padding: 10px;
}

h2, h4{
    text-align: center;
}