CSS에서는 overflow:hidden부동 자식의 높이로 확장 할 수 있도록 부모 컨테이너에 설정됩니다.
그러나 함께 결합하면 또 다른 흥미로운 기능이 있습니다 margin: auto…
PREVIOUS 형제가 부동 요소 인 경우 실제로 나란히 표시됩니다. 즉, 형제가 float:left있는 경우 컨테이너가 float:none overflow:hidden형제의 오른쪽에 나타나고 개행이 없습니다. 마치 정상적인 흐름에서 떠있는 것처럼 보입니다. 이전 형제가 있으면 float:right컨테이너가 형제의 왼쪽에 나타납니다. 이 컨테이너의 크기를 조정하면 플로팅 요소 사이의 중앙에 정확하게 표시됩니다. 당신은 이전의 두 형제, 하나가 있다면 말해 float:left, 다른 하나는 float:right, 컨테이너가 두 inbetween 중심으로 나타날 것이다.
그래서 여기에 문제가 있습니다 …
자식을 마스킹하지 않고 그 유형의 레이아웃을 어떻게 유지합니까?
웹 전체에서 인터넷 검색을 clear:both하면 컨테이너를 확장하는 방법에 대한 방법이 제공 되지만 왼쪽 / 오른쪽 이전 자식 센터링을 유지하는 데 대한 대체 솔루션을 찾을 수 없습니다. 컨테이너 overflow:visible를 만들면 컨테이너가 갑자기 플로팅 요소의 레이아웃 흐름을 무시하고 플로팅 요소 위에 레이어로 표시됩니다.
그래서 질문 :
overflow:hidden레이아웃을 유지 하려면 컨테이너가 있어야합니다 …
아이들이 가면을 쓰지 않도록 어떻게 만들 수 있습니까? 컨테이너 외부의 부모에 대해 절대적으로 자식을 배치해야합니다.
또는
overflow:visible컨테이너 외부의 부모에 상대적인 자식을 절대적으로 배치 할 수 있도록하려면 어떻게해야하나요?하지만 형제 플로트와 같은 레이아웃 흐름은 유지합니까?
답변
를 사용하여 clearfix동일한 방법으로 “레이아웃 보존”을 수행 할 수 있습니다 overflow: hidden.
.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */
class="clearfix"부모 에 클래스를 추가 하고 제거overflow: hidden;
답변
게시 된 답변 중 어느 것도 나를 위해 일하지 않았습니다. position: absolute그러나 자식 요소에 대한 설정 은 작동했습니다.
답변
이것은 오래된 질문이지만 직접 만났습니다.
이전 질문 ( “Children visible in overflow : hidden parent”)에 대해 상황에 맞는 반 솔루션이 있습니다.
상위 div가 position : relative 일 필요가없는 경우 하위 스타일을 visible : visible로 설정하면됩니다.
부모 div가 position : relative 여야하는 경우 자식을 표시 할 수있는 유일한 방법은 position : fixed였습니다. 이것은 내 상황에서 운 좋게도 나를 위해 일했지만 다른 사람들에게는 작동하지 않을 것이라고 상상할 것입니다.
다음은보기 위해 html 파일에 게시하는 엉뚱한 예입니다.
<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
<div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
<div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
</div>
</div>
답변
다른 경우, clearfix가이 문제를 해결하지 못하는 경우 부동 형제의 너비와 동일한 부동 형 형제에 여백을 추가하십시오.
답변
