[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁)

 

홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다.

<글쓰는 갓디노> 블로그의 메인 페이지도 float: left 속성을 사용하였습니다.
float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다.

 

최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여
매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에
아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다.

그래서 오늘은,

flaot 속성에 대하여 이야기하겠습니다.

 

float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.)

float의 성격

· block 의 성격을 무시합니다. 
· 형제 구조로 이루어져있습니다.
· 해당 요소들의 높이 값이 맞아야 미디어쿼리 적용 시 제대로 동작합니다.

float 속성값

float : left 왼쪽으로 배치
· float : right 오른쪽으로 배치
· float : none 좌우 어느 쪽으로도 배치하지 않습니다.

 

예제

<style>
	.image {
		float: left;
		margin-right: 20px;
	}
</style>

<div>
	<img src="https://placeimg.com/200/200/any" class="image" />
	<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, possimus, perspiciatis? Delectus laudantium magni laborum consequuntur, magnam facere rem saepe, inventore nesciunt, perspiciatis quam pariatur id dignissimos possimus quidem fuga.</p>
</div>

 

결과 화면

 

image에 float: left를 사용하면
이미지를 왼쪽 배치 후 오른쪽에 텍스트가 나란히 배치됩니다.

저는 css를 공부하던 초기에 책이나 강의를 통해서도 float의 개념이
확실하게 잡히지 않아서(특히 부유하다) 헷갈리던 차에
아래 비디오를 통하여 개념을 확실히 공부했습니다.

여러분도 아래 비디오를 꼭 확인해주세요.

 

예제

<style>
    .box {
        width: 100px;
        height: 100px;
        border: 1px solid #dedede;
        font-size: 30px;
    }

    .float {
        float: left;
    }

    .right {
        float: right;
    }

    .no1 {
        background-color: red;
    }

    .no2 {
        background-color: yellow;
    }

    .no3 {
        background-color: greenyellow;
    }

    .no4 {
        background-color: beige;
    }

    .no5 {
        background-color: skyblue;
    }
</style>

<div>
    <div class="box no1 float">1</div>
    <div class="box no2 float">2</div>
    <div class="box no3 float">3</div>
    <div class="box no4 right">4</div>
    <div class="box no5 float">5</div>
</div>

 

결과

 

박스 1, 2, 3, 5번은 float: left, 4번은 float: right를 주었습니다.

 

clear 속성: float 속성 해제하기

clear: both는 취소하다 라는 개념으로 float: left/right와 짝꿍 개념입니다.
float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나
부유된 영역 아래(under)로 들어가게 됩니다.
float 속성이 더 이상 사용하지 않고, 그 전으로 되돌리고 싶다면
사용하는 것이 clear: both입니다.

clear: both; 오른쪽/왼쪽을 취소, 가장 많이 사용
clear: left; 왼쪽을 취소
clear: right; 오른쪽을 취소
clear: none; 기초 값을 clear값을 설정하지 않은 것과 같다.

float: left를 해제하기 위해 clear: left라고 지정하면 되지만
float 속성 값을 일일이 기억하지 번거롭기 때문에
보통 clear: both라고 지정합니다.

예제

<style>
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #dedede;
		font-size: 30px;
	}

	.float {
		float: left;
	}

	.clear {
		clear: both;
	}

	.no1 {
		background-color: red;
	}

	.no2 {
		background-color: yellow;
	}

	.no3 {
		background-color: greenyellow;
	}

	.no4 {
		background-color: pink;
		width: 600px;
		height: 200px;
	}

	.no5 {
		background-color: skyblue;
	}

</style>

<div>
	<div class="box no1 float">1</div>
	<div class="box no2 float">2</div>
	<div class="box no3 float">3</div>
	<div class="box no4">4</div>
	<div class="box no5 clear">5</div>
</div>

 

결과

 

박스 4번의 경우, float 속성을 적용하지 않았으므로,
float을 적용했던 박스 1,2,3번은 부유한 상황이고,
이들의 아래로 들어가 있게 됩니다.
clear속성을 적용한 박스 5번은 flaot 속성이 해제돼있습니다.

 

실무에서 clear: both 사용방법

제가 실무에서 주로 사용하는 방법은
부모 태그에 class name을 fixedclear로 주고, ::after 가상 요소를 이용합니다.

.fixedclear:after {
	content: '';
	display: block;
	clear: both;
}

 

위와 같이 사용하면, float을 줄 때마다 부모 클래스 이름에 fixedclear를 주면,
앞으로 css에서 일일이 clear:both를 줄 필요가 없어 간편합니다.

예제

 

결과

float 실무에서 잊지말아야 할 꿀팁

· float은 <li>와 같은 형제요소 줍니다.(<a>에 안주는 이유: <a>끼리는 남이기 때문에)
· clear: both 사용시, 부모 태그에 class name을 fixedclear로 주고, ::after 가상요소를 이용합니다.

· float 해제하는 다른 방법은 overflow: hidden 입니다.
-> "overflow: hidden;"는 영역을 벗어난 부분을 감춰주는 의미이기도 하지만,
float을 시켰을 때 그 부모 영역의 높이가 없어져 버립니다.
예로, <ul> <li> 사용시, <li> 요소에 float을 주면 <ul> 의 높이가 없어집니다.
이때, <ul> 에 overflow: hidden; 을 적용하면 float을 해제되어 영역만큼 높이 설정이 됩니다.

· 같은 요소에서 margin: 0 auto와 float은 동시에 적용이 안됩니다.
-> 이 경우에는 <div> 태그를 이용하여 부모를 하나 더 감싼 후 부모요소에 margin 0 auto를 주거나,
flaot : left, margin-left로 너비를 잡아줍니다.