[    float 속성    ]


float 속성은 본래 이미지 태그와 글단락이 같이 있을 때 한 줄에 같이 나오기 위해 주로 사용되었는데


그뿐만 아니라 레이아웃을 잡을때도 많이 이용되게 되었다. 하지만 최근에는 flex가 도입되면서 점차 float를 이용한

레이아웃을 잡는 방식은 줄어들고 있는 추세이다.


float:left

float:right

처럼 사용해서 태그가 배치될 위치를 지정하게 된다.

아래의 예제에서는 본래 이미지 태그와 p태그는 block 속성에 의해 이미지 태그가 오고 그 아래에 문단 태그가 와야 정상이지만

이미지에 float:right를 줌으로서 img는 오른쪽으로 배치가 되고 문단이 왼쪽으로 배치되었다.


하지만 그 이후에 또 나오는 p태그(id="clearAdjustP")의 경우는 이러한 float의 영향을 배제시키고 싶기 때문에

float를 해제하는 clear 속성을 이용해서 clear:both해주면 float:left든 float:right든 다 해제한다는 의미가 되기 때문에

정상적으로 이미지 태그 아래에 출력되게 되는 것을 알 수 있다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
 
  <head>
    <meta charset="utf-8">
    <title>float attribute</title>
    <style media="screen">
      img{
        width:300px;
        float:right;
        margin: 20px;
      }
      p{
        border:1px solid gray;
      }
      .clearAdjustP{
        clear: both;
      }
    </style>
  </head>
   
    <img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero archi
    </p>
    <p id="clearAdjustP">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero architecto. Odit, et. Totam expedita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minus, obcaecati quia eaque perspiciatis! Vero cum libero archi
    </p>
  




float로 만든 Holy Grail Layout이다.

하지만... Flex가 더 유연함으로 FLex로 만드는 것을 권장한다...

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
 
  <head>
    <meta charset="utf-8">
    <title>Float Holy Grail Layout</title>
    <style media="screen">
      *{
        box-sizing: border-box;
      }
      .container{
        width:540px;
        border:1px solid gray;
        margin:auto;
      }
      header{
        border-bottom:1px solid gray;
      }
      nav{
        float:left;
        width:120px;
        border-right:1px solid gray;
      }
      article{
        float:left;
        width:300px;
        border-left: 1px solid gray;
        margin-left:-1px;
        border-right: 1px solid gray;
      }
 
      aside{
        float:left;
        width:120px;
        border-left: 1px solid gray;
        margin-left: -1px;
      }
      footer{
        clear:both;
        border-top:1px solid gray;
        text-align: center;
        padding:20px;
      }
    </style>
  </head>
   
 
    <div class="container">
      <header>
          <h1>CSS</h1>
      </header>
 
      <nav>
        <ul>
          <li>position</li>
          <li>float</li>
          <li>flex</li>
        </ul>
      </nav>
 
      <article class="">
        <h2>float</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit quae earum enim ab distinctio corrupti eius reprehenderit non, rerum ut nisi autem cum sint perferendis eum id velit, molestias nesciunt. Ullam dignissimos consequuntur explicabo id voluptas vel deleniti nesciunt veritatis iusto commodi, laudantium cumque vero deserunt laboriosam. Ea, qui
 
      </article>
 
        <aside class="">
          advertise
        </aside>
 
        <footer>footer</footer>
 
    </div>
      


저작자표시 비영리

'개발 > css' 카테고리의 다른 글

CSS로 일정 길이 이상일 때 텍스트 줄임말 ...로 표시하기/일정 길이 이상이면 자동 개행처리하기  (1) 2017.06.16
반응형 웹의 핵심 media Query  (0) 2017.06.04
화면의 Layout을 그리는 Flex에 대하여...  (0) 2017.06.04
position offset에 대해서...  (0) 2017.06.03
layout 관련 속성  (0) 2017.06.03

+ Recent posts

티스토리툴바