728x90
반응형

Float
- 블럭레벨을 평행정렬될 수 있도록 함.
- 손을 잡는다
- 끊어내는건 clear
- float를 적용받은 블럭레벨은 width를 컨텐츠의 크기만큼 바꿔버림.
인라인레벨에 한해서 태그들 enter공간에 따라 여백공간이 생성된다.
- clear: left - 해당 요소에 바로 인접한 좌측에 플로팅 요소가 허용되지 않음
- clear: right- 해당 요소에 바로 인접한 우측에 플로팅 요소가 허용되지 않음
- clear: both - 해당 요소에 바로 인접한 양쪽에 플로팅 요소가 허용되지 않음
- clear: inherit - 상위 요소(부모요소)의 클리어 값을 상속받음.

 

float
<!DOCTYPE html>
<html>
  <head>
    <title>float 속성</title>
    <style>
      /* clear속성값 :
        left - 해당 요소에 바로 인접한 좌측에 플로팅 요소가 허용되지 않음
        right- 해당 요소에 바로 인접한 우측에 플로팅 요소가 허용되지 않음
        both - 해당 요소에 바로 인접한 양쪽에 플로팅 요소가 허용되지 않음
        inherit - 상위 요소(부모요소)의 클리어 값을 상속받음. */

      .divClass {
        float: left;
        padding: 15px;
      }
      .div1 {
        background: red;
      }
      .div2 {
        background: yellow;
      }
      .div3 {
        background: green;
      }
      p {
        clear: both;
      }
    </style>
  </head>
  <body>
    <h2>Float 사용의 다른 방법</h2>
    <div style="width: 300px; margin: 0 auto; border: 2px solid #000">
      <div class="div1 divClass">Div 1</div>
      <div class="div2 divClass">Div 2</div>
    </div>

    <div class="div2 divClass" style="clear: left">Div 2</div>
    <div class="div2 divClass">Div 2</div>
    <div class="div3 divClass">Div 3</div>

    <p>Float 사용의 다른 방법</p>
    <p>Float 사용의 다른 방법</p>
    <div class="div1 divClass">Div 1</div>
    <div class="div2 divClass">Div 2</div>
    <div class="div3 divClass">Div 3</div>
  </body>
</html>​

 

728x90
반응형
저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] ex) 회원가입  (0) 2024.02.22
[CSS] Float, overflow  (0) 2024.02.22
[CSS] css, display  (0) 2024.02.21
[CSS] form selector  (0) 2024.02.21
[CSS] 가상엘리먼트(::)선택자  (0) 2024.02.20

+ Recent posts

티스토리툴바