EverGiver

float 속성 본문

Front-End (웹)/CSS

float 속성

친절한개발초보자 2021. 7. 28. 21:27
728x90
왼쪽이나 오른쪽으로 배치하는 float 속성

 

  • <p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있다.
  • <p> 태그는 블록 레벨 요소이므로 이미지와 나란히 한 줄에 배치할 수 없다. 
  • 이런 경우 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있다.
  • float 속성은 웹 요소를 문서 위에 떠 있게 만든다.
    ('떠 있다'는 의미는 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 의미)
  • display:block 속성에 사용하는 css속성으로 세로 배치를 가로 배치로 전환
종류 설명
left 해당 요소를 문서의 왼쪽에 배치한다.
right 해당 요소를 문서의 오른쪽에 배치한다.
none 좌우 어느 쪽에도 배치하지도 않는다. (기본값)

 

float 속성을 해제하는 clear 속성

 

  • float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달된다.
  • float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성이다.
종류 설명
left float: left를 해체한다.
right float: right를 해체한다.
both float: left와 float: right를 해제한다.
  • float가 들어간 부모 태그한테 class="임의의 클래스명" 넣어준다.
  • css 속성에서 임의의 클래스명:after{content:"";display:block;clear:both} 넣어준다

 

float 사용 시 주의할 점

 

  1. 사용하면 다른 태그가 겹쳐지는 현상이 발생한다.
  2. 사용하면 감싸고 있는 태그의 세로 값이 사라진다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>float #1</title>
    <style>
        *{margin:0;padding:0;}
        #a{background-color:#123456;}
        #b{background-color:#987654;}
        
        #a div{width:100px;height:100px;font-size:15px;}
        #b div{width:100px;height:100px;float:right;}
        
        #a div:nth-child(1){background-color:red;float:left}
        #a div:nth-child(2){background-color:green;float:left}
        #a div:nth-child(3){background-color:pink;float:left}
        
        #b div:nth-child(1){background-color:orange;}
        #b div:nth-child(2){background-color:violet;}
        #b div:nth-child(3){background-color:aqua;}
        
        .clearfix:after{content:"안녕";display:block;clear:both;}
        
        /*:after = 앞에 있는 선택자 뒤에 만들겠다*/
        /*content:"" = 내용물이 비어있다.*/
        /*display:block = 입력산 대상을 display:block 형태로 만들어 주는 구문*/
        /*clear:both = float 구문이 더 이상 다른 대상을 떙기지 못하도록 만들어주는 구문*/
    </style>
</head>
<body>
    <div id="a" class="clearfix">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    
    <div id="b">
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

 

display: inline-block과 float: left 속성의 차이점

 

  • 공통점
    - 목록에 메뉴 항목을 가로로 배치한다.
  • 차이점
    - display:inline-block은 가로로 배치하면서도 기본 마진과 패딩을 가진다.
    - display: left는 가로로 배치될 때 요소에 기본 마진과 패딩이 없다.
      (필요하다면 요소마다 마진과 패딩을 지정해야 한다. 그리고 float: left를 사용하면 clear 속성으로 플로팅을 해제해야 한다.)
728x90
저작자표시

'Front-End (웹) > CSS' 카테고리의 다른 글

기타 CSS 속성  (0) 2021.08.09
여백 계산법  (0) 2021.07.28
background 속성  (0) 2021.07.26
중앙정렬  (0) 2021.07.23
박스 모델과 CSS 속성  (0) 2021.07.22
'Front-End (웹)/CSS' Related Articles more
Comments