본문 바로가기
프로그래밍/HTML, CSS

CSS - float 와 clear 프로퍼티 사용하기

by pentode 2018. 5. 9.

HTML 요소가 화면에 보여지는 기본 방식은 Block 요소인 경우 자동으로 개행되어 아래에 보여지게 되고, Inline 요소인 경우는 오른쪽 옆에 배치되어지고, 화면에 다 보여지지 않으면 아래로 내려가서 배치되어지는 것입니다.


CSS의 float 프로퍼티는 HTML 요소가 일반적인 흐름에 따르는 배치를 벗어나서 왼쪽 또는 오른쪽으로 띄우는(float) 효과를 줍니다. clear 프로퍼티는 clear된 요소의 좌우에 float된 요소를 허용하지 않도록 합니다.


※ float 프로퍼티의 값

- left : 요소 자신을 포함하고 있는 컨테이너의 왼쪽으로 띄웁니다.

- right : 요소 자신을 포함하고 있는 컨테이너의 오른쪽으로 띄웁니다.

- none : 요소를 띄우지 않습니다. 기본값 입니다.


※ clear 프로퍼티의 값

- none : 요소들이 양쪽으로 float 할 수 있습니다. 이것이 기본값입니다.

- left : 왼쪽으로 float 할 수 없게 합니다.

- right : 오른쪽으로 float 할 수 없게 합니다.

- both : 양쪽으로 다 float 할 수 없게 합니다.



1. float: none;


- float를 사용하지 않을때의 기본적인 배치입니다.


<style>

div.container {

    border:solid 1px green;

}

</style>


<div class="container">

<img src="images/04.jpg" />

<p>CSS의  overflow 프로퍼티는...</p>

</div>



2. float: left;


- 이미지에 float: left; 를 사용해서 왼쪽으로 띄웁니다.


<style>

div.container {

    border:solid 1px green;

}

img.left {

    float: left;

}

</style>


<div class="container">

<img src="images/04.jpg" class="left" />

<p>CSS의  overflow 프로퍼티는...</p>

</div>



3. float: right;


- 이미지를 오른쪽으로 띄웁니다. 나머지 사항들은 float: left;와 같습니다.




4. clear 프로퍼티


- float:left; 한 상태에서 부모요소 끝에  <p>아래쪽에 추가된 컨텐츠 입니다.</p> 를 추가한 화면 입니다.



- 추가된 내용 왼쪽에 float 요소가 오지 못하도록 <p style="clear: left;">아래쪽에 추가된 컨텐츠 입니다.</p>를 적용한 화면 입니다.



- 이처럼 clear 프로퍼티를 사용하여 요소의 왼쪽, 오른쪽 또는 양쪽에 float된 요소가 오지 못하도록 지정할 수 있습니다.



5. float된 자식 요소가 있을 경우 부모 요소의 높이 조정


이미지를 띄우게 되면 이미지를 포함하고 있는 요소(여기서 <div class="container">)는 이미지의 높이를 인식하지 못하게 됩니다. 내부에 있는 글자들의 높이만 인식하게 되므로 이미지의 높이가 높다면 부모 요소를 넘치게 됩니다.


부모 요소가 float된 요소의 높이를 인식하게 하는 방법으로는 clear 프로퍼티를 사용할 수 있습니다.


- 부모 요소에 overflow:auto; 프로퍼티를 사용합니다. 이 방법은 경우데 따라 스크롤바가 생길 수 있습니다.

- 부모 요소의 마지막 부분에 clear: both; 프로퍼티를 지정한 빈 block 요소를 추가합니다.


<div style="clear:both;"></div>


- CSS의 ::after 셀렉터를 사용하여 빈 block 요소를 추가합니다. IE8에서는 콜론이 하나인 :after를 사용합니다.


<style>

div.container::after {

    clear: both;

    display: block;

    content: "";

}

</style>


반응형