내 overflow: hidden 컨테이너 내부에 인접한 부유 요소 (주황색 상자)가 포함되어 있지 않습니다.오버플로 : 숨겨진 컨테이너에 부수적 인 인접 요소가 없습니다.
부유 요소는 컨테이너 (섹션) 옆으로갑니다. 그러나 overflow:hidden을 제거하면 인접한 떠 다니는 요소가 컨테이너 내부로 이동하여 컨테이너의 플로팅 된 자식을 존중합니다.
왜 이런 일이 발생합니까? 블록 서식 지정 컨텍스트와 관련이 있습니까?
컨테이너에 overflow: hidden;을 적용하면 어쩌면 새로운 BFC가 트리거되고 자식과 인접한 플로팅 요소 만 포함됩니까? 여기
난 당신이 이미 BFC이라는 답을 알고 추측 fiddle
입니다. :)
오버플로 (보이지 않음)를 넣으면 새로운 블록 형식화 컨텍스트가 만들어지며 인접 플로트 요소에 컨테이너가 초대되지 않습니다.
따라서 overflow: hidden을 보관하면 주황색 div가 컨테이너 옆에 있습니다.
확인이 아웃 :
일부 정보를 제공해 주셔서 감사합니다. 하지만 오렌지 박스가 컨테이너 옆에 앉아있는 이유를 알고 계십니까? 다른 요소 나 다른 요소와 겹치지 않는 이유는 무엇입니까? 섹션 옆에 있습니다. – Limpuls
너가'단면도'를 위해 너비를 자동 조정하지 않기 때문에 너비를 놓으려고 노력해라. 그러면 지금 그것은 매우 멋지게 옆에 앉지 않을 것이다. – kukkuz
@Limpuls가 궁금 해서요. 실용적인 상황에서 이것을 사용할 수 있다면 결과를 게시 해 주시겠습니까? 응답이 당신을 도운 경우에 또한 당신의 upvote/응답을 좋아하십시오. 감사! – kukkuz
디버깅 도움을 구하고 질문은 질문 자체를 재현하는 데 필요한 가장 짧은 코드 **를 포함해야합니다 ** NB - ** 제발 돈 '. 이 요구 사항을 해결하기 위해 코드 블록을 악용하십시오 **. –
@Paulie_D 죄송합니다. 저는 새로운 SO 사용자이고 아무 것도 얻으려고하지 않았습니다. 고칠 것입니다. – Limpuls
스택 오버플로에 오신 것을 환영합니다! 단락에서 쉽게 깨닫게하기 위해 질문을 편집했습니다. 백틱을 사용하면 코드와 같은 형식을 지정할 수 있습니다 (예 : CSS). 하이퍼 링크는 하이퍼 링크 버튼과 함께 임베드 될 수 있습니다. 질문에 관련 HTML을 추가하십시오 (바이올린뿐만 아니라). 행운을 빕니다! – trincot