float 해제 overflow:hidden 나쁜 예

CSS에서 부동 요소를 배치할 때 후속 요소의 부동을 해제하는 방법은 clearfix hack 외에 부동 요소의 부모 요소overflow: hidden를 지정하여 부동 요소에 의해 파괴된 높이를 식별할 수 있습니다.이 방법은clearfix에 비해 CSS에 대한 설명이 간단하기 때문에 초보자들은 쉽게 파악할 수 있지만 페이지의 디자인에 따라 주의해서 사용해야 할 부분이다.
예를 들어, 이러한 현상 (아래 그림) 입니다.이것은 두 높이가 다른div원소를 각각 float: left, float: right 위에 놓는 것이다.브라우저 화면에서 float의 div 크기와 표시 위치를 확인하기 위해 CSS에서 요소의 직사각형 영역을 지정outline: 1px solid red;하려고 하는데 이상하게 보입니다.

<div class="container">
  <div class="left">Lorem ipsum dolor sit amet.</div>
  <div class="right">Lorem ipsum dolor sit amet.</div>
</div>

CSS 내용

.container {
  width: 700px;
  margin: 50px auto 0;
  overflow: hidden;
}
.left {
  float: left;
  width: 300px;
  height: 200px;
  margin-left: 20px;
  outline: 1px solid red;
}
.right {
  float: right;
  width: 300px;
  height: 100px;
  outline: 1px solid red;
}

왜 이런 디스플레이 결함이 생겼을까?나는 윤곽선outline 속성에 대한 MDN 설명을 읽어서야 원인을 알았다.
컨투어라인은 다음과 같이 경계선과 다릅니다.
윤곽선은 영역을 차지하지 않고 요소 내용 밖으로 그려집니다.
CSS 규격으로 말하자면 그에 상응하는 곳이 이것입니까?4.5. Offsetting the Outline: the outline-offset property
By default, the outline is drawn starting just outside the border edge.
즉, 원소의border를 포함하는 구역의 바깥쪽에 윤곽선을 묘사했기 때문에 부모 원소overflow: hidden를 통해 윤곽선을 잘라냈다.위의 화면 스냅샷에서 왼쪽에 떠다니는 블록 요소는 왼쪽outline이 부족하지 않을 수 있지만 실제로는 div.left 가 설정되어 있습니다.
참고로 위에서 말한 outline-offset 속성을 사용하여 추가margin-left: 20px;하면 직사각형의 안쪽 방향(border 위치)에서 윤곽선을 표시할 수 있습니다.
더 흔히 볼 수 있는 예는 outline-offset: -1px; 에서 음영의 블록 요소를 가로로 배열하고float로 놓을 때 오른쪽 부분의 블록만 재단된다는 것이다.이런 현상도 테두리 외부의 음영이 부동으로 해제된overflow 속성이 잘라진 원인이다.

부동 요소에 표시된 코드 예가 없습니다

위에서 소개한 내용을 제외하고 box-shadow의float 해제는 float 요소의'표시 부족'을 일으킬 수 있는 속성의 사용 방법과 예시 코드는 다음과 같다.
See the Pen [CSS basics] Clearing floats with overflow:hidden or clearfix by Kazuhiro Hashimoto ( @kaz_hashimoto )
on CodePen .


여섯 가지 유형의 속성에 대해 이 Pen은 "oveflow: hidden"과 "clearfix에서 float 해제를 실행합니다."등 총 12개의 예시를 표시합니다.각 예제의 구성은 다음과 같습니다.

• 배경 검은색 직사각형: 부모 요소 div.container
• 흰색 테두리 장방형:float 요소 div.left,div.right