-
CSS - float 개요프로그래밍/HTML & CSS 2021. 9. 22.반응형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> .box { width:150px; height: 150px; padding: 10px; margin: 20px; border: 3px dotted gray; text-align: center; line-height: 150px; font-size: 20px; font-weight: 900; } .left { float: left; } .right { float: right; } </style> </head> <body> <div class="box">A</div> <div class="box">B</div> <hr> <div class="box left">A</div> <div class="box left">B</div> <div class="box left">C</div> <!-- float:left 속성이 유지되어 이상한 현상 --> <div style="width:100px; height: 100px; background: yellow;"></div> <div style="clear: both;"> clear: both는 가장 가까운 앞 요소에 설정된 float:left, float:right 속성 해제 </div> <hr> <div class="box right">A</div> <div class="box right">B</div> <div class="box right">C</div> <div style="clear: both;"></div> </body> </html>
- float: left 옵션을 줘서 ABC를 왼쪽으로 정렬 시켰는데
그 다음에 노랑 박스를 주면 밑으로 가야하는데 얘도 똑같이 왼쪽으로 붙어 버렸다
float 옵션은 다 쓰고나면 반드시 clear: both 옵션으로 청소를 해줘야 한다.
안그러면 계속 이상하게 나온다.
- clear: both는 가장 가까운 앞 요소에 설정된 float:left, float:right 속성을 해제함
float 속성 해제하는 여러 방법들
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> * { box-sizing: border-box; } .p-box { margin-top: 20px; } .box { width: 50px; height: 50px; padding: 10px; border: 3px dotted gray; text-align: center; } .left { float: left; } .clear::after { content: ""; display: block; clear: both; } </style> </head> <body> <h3> float 해제 </h3> <div class="p-box"> <div class="box left">A</div> <div class="box left">B</div> </div> <div class="p-box"> <div class="box left">C</div> <div class="box left">D</div> </div> <div style="clear: both;"></div> <hr> <p> 부모에 강제로 height 속성을 주면 float가 해제 됨 </p> <div class="p-box" style="height: 55px;"> <div class="box left">A</div> <div class="box left">B</div> </div> <div class="p-box" style="height: 55px;"> <div class="box left">C</div> <div class="box left">D</div> </div> <hr> <p> clear:both는 margin이 적용되지 않음 </p> <div class="p-box"> <div class="box left">A</div> <div class="box left">B</div> </div> <div class="p-box" style="clear: both; margin-top: 20px;"> <div class="box left">C</div> <div class="box left">D</div> </div> <div style="clear: both;"></div> <hr> <p> float된 부모 요소에 overflow:hidden을 주면 float 속성이 해제 </p> <div class="p-box" style="overflow: hidden;"> <div class="box left">A</div> <div class="box left">B</div> </div> <div class="p-box" style="overflow: hidden; margin-top: 20px;"> <div class="box left">C</div> <div class="box left">D</div> </div> <hr> <p> float된 부모 요소에 가상요소를 만들고 해당 요소에 clear:both 지정(권장) </p> <div class="p-box clear"> <div class="box left">A</div> <div class="box left">B</div> </div> <div class="p-box clear" style="margin-top: 20px;"> <div class="box left">C</div> <div class="box left">D</div> </div> <hr> </body> </html>
- 부모 속성에 높이 값을 주면 자동 해제
- clear: both 속성은 마진의 영향을 안 받음
영향을 받았으면 CD위로 공간이 생겼어야 함.
- overflow: hidden을 부모한테 사용하면 float는 없어짐
-
.clear::after { content: ""; display: block; clear: both; }이렇게 ::after를 사용해서 해당 요소가 끝나면 ''으로 가상요소를 만들어서 after 자체에 clear 속성을 주는게 가장 나은 방법 이다.
나머지 방법들은 어떤 변수를 초래할지 모름.
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS - flex (0) 2021.09.23 CSS - 영역 관련 (0) 2021.09.23 CSS - margin 마진 겹침 현상 (0) 2021.09.22 CSS - 다양한 옵션들 (0) 2021.09.22 CSS - 영역 관련 (0) 2021.09.22
