• Q&A
  • 회원가입
  • 로그인

[position] CSS - float 속성 ★★★ - 요소나란히 (= 요소한줄로 = 요소가로로 = 요소옆으로정렬 = 플로트속성, 상속 X)

float 예제

[float:right 경우]

 

<style>

img {float: right;}

</style>


<p><img src="https://source.unsplash.com/random" alt="테스트" style="width:170px;height:170px;margin-left:15px;">

홈짱닷컴 Homzzang.com</p>

 

결과보기


[float:left 경우]


<style>

img {float: left;}

</style>


<p><img src="https://source.unsplash.com/random" alt="테스트" style="width:170px;height:170px;margin-left:15px;">

홈짱닷컴 Homzzang.com</p>

 

결과보기


[float:none 경우]

 

<style>

img {float: none;}

</style>


<p><img src="https://source.unsplash.com/random" alt="테스트" style="width:170px;height:170px;margin-left:15px;">

홈짱닷컴 Homzzang.com</p>


결과보기

 
 
float 정의
 
block 요소・inline 요소의 위치를 옆으로 나란히 정렬. 

cf. 
 inline (인라인) 요소 경우엔 부모 요소의 text-align 속성 이용해 정렬

 


 
1.
기본값 : none
상속여부 : X
애니효과 : X
CSS버전 : CSS1
JS구문 : object.style.cssFloat="left"
 
 
2.
position 속성의 속성값이 absolute일 경우 float 속성은 무시됨.
 
 
3.
한 줄에 나란히 쓸 내용끼리는 모두 float 속성의 속성값을 left 또는 right 선언해줘야 함.

줄바꿈을 위해서는 clear 속성 이용하거나 clearfix핵 이용.

 
 
4. 
float 속성은 크게 아래 3가지 경우에 주로 사용

① 
이미지를 여러 개 보여주는 갤러리 게시판에서 가지런히 정렬할 때 사용

② 
네비게이션 메뉴를 수평으로 정렬시킬 때 사용. 
(display:inline 속성을 이용해 수평 정렬도 가능)

③ 
홈페이지 전체 골격 (=레이아웃}을 잡을 때 사용. 
이 경우, clear 속성을 함께 잘 이용해야 함.


5. ★
float 속성을 이용할 땐, 
반드시 body 태그에 margin과 padding의 속성값을 0으로 줘야 크로스 브라우징 됨.
왜냐하면, 
익스8과 그 이하 브라우저 경우엔 
기본적으로 17px 정도의 margin과 padding 값이 주어지기 때문.
body {margin: 0; padding: 0;}


6. 
float 속성을 이용할 땐, 항상 DTD를 선언하고 사용하는 게 좋음
(예) <!DOCTYPE html>


7.
float 속성은 해당 요소와 그 하위 요소의 속성을 display:inline-block 속성화 시킴.
따라서, 별도로 display:inline-block 붙일 필요 없음.


8. ★
float:right 속성 붙은 요소는 float:left 속성 붙은 요소하고만 나란히 정렬됨.
설사, 다른 요소가 inline 또는 inline-block 속성의 요소일지라도 줄 바꿈 됨.
이 점은 아주 중요하니 반드시 명심할 것 !!  
예제 보기
단, float:left 붙은 요소는 display:inline-block 요소와 나란히 정렬됨.


9.
float:left (또는, float:right) 붙은 <span> 요소와 안 붙은 <span> 요소는
아주 미세하게 높이 차이가 발생하니 반드시 모든 요소에 float 붙일 것 !!
예제 보기


10. ★
float:left 와 float:right 경우, 어느 게 먼저 정의되는가는 중요하지 않음.
나란히 위치시키고자 하는 것에 다 붙이면 됨.
단, 부모 요소 너비 좁을 경우  나중 위치한 요소가 밑으로 내려감.
결과보기 , 결과보기

box-sizing 속성 참고  https://homzzang.com/b/css-225
 
11.
float 지정된 요소는 반드시 width 함께 지정해줘야 브라우저마다 동일하게 출력.
 
 
 
float 구문
 
선택자 {float:속성값;}
 

[속성값]
 
none
안띄움, 텍스트 위치에 출력. (기본값)
 
left
왼쪽에 띄움
 
right
오른쪽에 띄움
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소의 속성을 상속
 
※ 주의
1. 속성값에 centermiddle 값은 없음.  
2. 블럭 요소의 중앙 정렬은 해당 요소에 margin:0 auto 이용.
 
 
float 왼쪽정렬 (= 좌측정렬)
 
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {float:left; widh:100px; padding-left:5px;}
p.p2 {float:left; widh:100px; padding-left:30px;}
</style>

<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
 
 
float 오른쪽정렬 (= 우측정렬)
 
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {float:right; widh:100px; padding-right:5px;}
p.p2 {float:right; widh:100px; padding-right:30px;}
</style>

<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div> 
 
 
float 양쪽정렬 (= 하나는 왼쪽, 하나는 오른쪽에 정렬)

<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {float:left; widh:100px; padding-left:5px;}
p.p2 {float:right; widh:100px; padding-right:30px;}
</style>

<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>

결과보기
 
 
float 주의사항

 

아래처럼, 
하나에만 float 속성 지정하거나 

기준점의 float 속성값을 none으로 할 경우, 한 줄에 나란히 정렬 안 됨.

 


예제1 - 한 요소에만 float 속성 지정 경우, 나란히 정렬 X

 

<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {padding-left:5px;}
p.p2 {float:left; widh:100px; padding-left:30px;}
</style>

<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
 

예제2 - 한 요소에 float:none 적용 시, 나란히 정렬 X
 
<style>
div {width:100%; height:50px; border:1px solid red;}
p.p1 {float:none; widh:100px; padding-left:5px;}
p.p2 {float:left; widh:100px; padding-left:30px;}
</style>

<div>
<p class=p1>홈짱닷컴 (homzzang.com)</p>
<p class=p2>홈페이지 무료 제작 강의</p>
</div>
  
 

★ 텍스트를 이미지와 나란히 배치할 때도 float 속성 이용.

 

이 경우, 
이미지 태그가 텍스트보다 먼저 와야 하며, 
이미지 좌우 위치는 float:left 또는 float:right로 조정함. 
글자와 이미지 사이의 간격은 margin 속성을 이용.

 


 

<style type="text/css">
div {widht:200px; height:300px; background:yellow;}
img {float:left; margin-right:30px;}
</style>

<div>
<a href=http://www.homzzang.com target=blank><img src=http://cfile7.uf.tistory.com/image/2411FE4C51B59E391B92F4 border=0>홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 홈짱닷컴 (homzzang.com) 
</a>
</div>


결과보기

 
  
float 반응형 이미지 2개 나란히 하기

 

<style>

#Hz {

   width:100%;

}

#Hz img {

    float:left;

    display:block;

    max-width:49%;

    width:49%;

    height:auto;

}

#Hz img:last-child {

    float:right;

    display:block;

}
.clearfix {

   clear:both;

}

</style>


<div id="Hz">

   <img src="https://homzzang.com/img1.jpg"> 

   <img src="https://homzzang.com/img2.jpg">
   
<div class="clearfix"></div>

</div>


결과보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012