float & clearfix

wkdgusrhkd·2021년 1월 25일
0

HTML & CSS

목록 보기
1/3
post-thumbnail

float에 관하여

cssfloat을 주면 의도치 않은 상황이 발생할 때가 있습니다. 우리가 애써 잡아놓은 레이아웃이 망가지는거죠. 이를 위한 대안은 여러가지가 있습니다. 그 중 하나가 display: flex; 를 사용하는 것입니다.
flexboxfloat를 대체 할 좋은 방안이지만 구버전의 브라우저들에서는 여전히 float를 요구한다고 합니다.

다른 방안은 floa와 함께 clearfix를 추가 해주는것입니다.

간단한 예시를 보겠습니다.

float이 없을 때

각각의 <div> 가 우리가 의도했던 위치를 잘 잡고 있습니다.

float: left & right를 주었을 때

이번엔 .container 안의 .box들에 float을 줘보겠습니다.

.box1.box2.container밖으로 튀어나온 것을 볼 수 있습니다.

clearfix 추가

이어서, .clearfix를 추가해 보겠습니다.

이제야 우리가 의도했던대로 왼쪽정렬과 오른쪽정렬이 완성됐습니다.
clearfix를 주는 위치는 float을 준 tag부모 요소에 추가해주면 됩니다.
예시에서는 .box1, .box2float을 주었으니, 이들의 부모 요소<div class="container">에 추가 해 주었습니다.

.float--left{
    float: left;
}
.float--right{
    float: right;
}
.clearfix::after{
    content: '';
    clear: both;
    display: block;
}

제가 사용한 clearfix 말고 다른 방법으로 clearfix를 줄 수도 있습니다.
float and clearfix 라는 키워드로 검색을 해보시길 추천합니다.

profile
프론트!

0개의 댓글