float
float는 한 요소가 흐름에서 빠져나와 단어 그대로의 의미대로 떠있는 특징을 가지고 있다.
원래 float속성은 사진과 텍스트를 같이 배치하기 위해 쓰여졌지만 현재에는 웹페이지의 레이아웃을 잡을때 많이 사용하고 있다.
- left 왼쪽 정렬 기준으로 띄우는 속성값
- right 오른쪽 정렬 기준으로 띄우는 속성값
- none initial value 띄우지 않는 다는 의미
이런 float는 사용 후에 꼭 해제를 해줘야합니다 이유는 2가지 입니다
- float 요소가 좌측이나 우측에 띄어지면서 다른 요소들에게도 흐름에 영향을 미친다.
- float 속성 은 부모보다 더 높이 띄어져 있으므로 부모에게 높이의 영향을 주지 못한다.
그럼 이제 어떻게 해결해야할까?🤔
일단 float로 띄워서 left정렬을 하고 아직 해제 하지 않은 요소들이 있다. 두 자식을 감싸고 있는 부모요소는 높이값의 영향을 전혀 받지 못하고 있는 상태이다.
<div class="wrapper">
<div class="float">float</div>
<div class="float">float</div>
</div>
1. 부모에게도 float 속성 주기
부모도 똑같이 띄워서 자식들과 같은 z-index값에 위치하면 부모의 높이값을 찾을수 있지 않을까? 정답은 찾을수 있다!
다만 부모 요소 의 넓이값 또한 자식 요소와 마찬가지로 줄어들게 된다. 만약 부모의 넓이값이 브라우저 크게에 맞게 대응해야하는 하는 경우 이를 대응하지 못할뿐더러 다른 형제 요소들 또 그 상위 부모 요소가 있다면 일일리 float로 맞춰야하는 번거로움이 있을것이다.
2. 부모에게 overflow 속성 주기
overflow 속성을 주게 되면 부모가 가지는 영역이 *block formatting context가 되기 때문에 띄어진 자식이라도 그 자식의 높이 만큼 새로운 독립된 영역을 갖게 된다. 비로소 자식을 감싸고 있던 부모가 브라우저의 크기만큼의 넓이값을 되찾게 된다. 그러나 이 방법은 자식의 넓이가 가변적이고 부모의 넓이보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 권장하지 않는다.
* <여기서 "block formatting context" 이는 현재는 그냥 다시 높이값을 되찾는다 정도로만 이해하고 저 정확시 알고 싶다면 해당 링크를 참고 https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context >
3. clear 속성 사용
clear는 취소한다라는 특징을 가지고 있다. clear: left를 쓰게 되면 좌측 부유 제거 clear: both를 사용하면 양쪽 부유 제거를 생각하면 된다. 그럼 clear속성은 어디에 줘야할까? float를 사용한 자식에게 주게 되면 그 즉시 float 자체가 취소되므로 의도한대로 좌측 정렬이 되지 않드다. 부모요소에 주게 부모가 부유를 한게 아니기 때문에 올바르지 않은 방법이다 그럼 어디에 줘야할까?
좌측 정렬이 끝난 즉시주는것이 맞다.
아래 코드처럼 오로지 clear를 사용하기 위한 float를 사용한 형제 요소를 생성한 뒤에 clear:left 를 주게 되면 부모가 높이값을 되찾게 된다.
<div class="wrapper">
<div class="float">float</div>
<div class="float">float</div>
<div class="clear"></div>
</div>
저렇게 마크업 자체에 div 를 생성하는 것보다 더 쉬운 방법은 ::after 가상 선택자로 부모에게 자식요소가 다 끝난뒤 자식요소를 생성해! 하는 방법도 있다. 이렇게 되면 중간에 더 많은 float를 띄운 자식요소가 들어오게 될 경우를 생각했을때 유지보수성이 더 좋아진다.
.wrapper::after { clear: both }
❗️하다보니 궁금한점이 하나 생겼는데 이는 해결법을 알게되면 적도록 하겠다.
wrapper 부모에 감싸져있고 float 속성으로 띄운 자식 요소가 있는고 clear로 부유하는것을 취소하지 않은 상태에서 다른 새로운 박스요소에 '안녕하세요' 텍스트를 적어보았다. 당연히 '안녕하세요' 텍스트를 가진 박스는 float로 띄워진 다른 박스로 인해 텍스와 함께 밑으로 내려갈줄 알았던거와는 반대로 '안녕하세요'텍스트는 그대로 남고 딱 박스만 뒤로 가는 현상이 발생했다
예상으로는 박스 안에 텍스트는 박스 자체보다 높이가 높아서 그런거 같은데 이는 확실해지면 해당 블로그 글에 다시 적도록 하겠다!
<style>
.wrapper {
background-color: antiquewhite;
}
.box {
width: 150px;
height: 150px;
background-color: salmon;
float: left;
}
.box-02 {
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">띄워진 상태</div>
<div class="box">띄워진 상태</div>
</div>
<div class="box-02">안녕하세요</div>
</body>
'dev > HTML CSS' 카테고리의 다른 글
| [html] img 사용 이유와 관련 속성 (2) | 2023.03.19 |
|---|---|
| [CSS] flex-cotainer, item (0) | 2023.03.11 |
| [CSS] overflow (0) | 2023.03.09 |
| [CSS]선택자 결합자, 가상(의사) 클래스, 가상(의사) 요소 (0) | 2023.03.05 |
| [HTML/CSS] 단위 공부 (0) | 2023.03.04 |
댓글