Float property

shorry·2022년 2월 16일
0

CSS

목록 보기
3/3

✔️float


  • 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.
  • 본래 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.
<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            float: left;
            margin-right: 10px;
            width: 200px;
        }
        .wrapper {
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img src="./뚱이.jpg">
        <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</body>

</html>

  • 해당 요소를 다음 요소 위에 떠 있게(부유하게) 한다. (여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다.)
  • float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다.

📌정렬

프로퍼티 값설명
none요소를 떠 있게 하지 않는다. (기본값)
right요소를 오른쪽으로 이동시킨다.
left요소를 왼쪽으로 이동시킨다.
  • 오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.
  • float 프로퍼티는 좌측, 우측 가로 정렬만 할 수 있다. 중앙 가로 정렬은 margin 프로퍼티를 사용해야 한다.
  • block 레벨 요소에 float 프로퍼티가 선언되면 width가 inline 요소와 같이 content에 맞게 최소화되고 다음 요소 위에 떠 있게(부유하게) 된다.

Reference



End.

profile
I'm SHORRY about that

0개의 댓글