CSS에서 오버플로를 지우는 방법은 무엇입니까? 오버플로:수레를 지우는 숨겨진 예-CSS 튜토리얼-php.cn

CSS에서 오버플로를 지우는 방법은 무엇입니까? 오버플로:수레를 지우는 숨겨진 예

不言

풀어 주다： 2018-10-29 12:01:57

원래의

4710명이 탐색했습니다.

이 기사에서는 CSS의 Overflow:hidden 속성을 사용하여 부동소수점을 삭제하는 방법을 소개합니다.

이전 글에서 CSS의 Overflow:hidden 콘텐츠의 오버플로 및 숨겨진 효과를 소개했습니다. 다음 글에서는 CSS의 Overflow:hidden 속성이 부동 소수점 지우기를 구현하는 방법을 살펴보겠습니다.

우선, 부동 소수점을 지우는 것은 상위 요소가 부동 요소의 높이를 감지하여 상위 요소를 지원할 수 있다는 것을 의미합니다. 즉, 상위 요소는 자체 높이를 가지며, 따라서 상위 요소 뒤에 있는 요소를 피합니다. 부동 소수점을 지우면 상위 요소 뒤에 있는 형제 요소의 레이아웃에 미치는 영향이 해결되는 반면, 하위 요소 뒤에 있는 형제 요소의 레이아웃은 계속 채워집니다.

구체적인 예를 살펴보겠습니다

<html>
<head>
 <style type="text/css"> 
.parent{
 width:300px; 
 background:lightblue; 
 border:1px solid; 
} 
 .child1{
  width:100px; 
  height:100px; 
  background:pink; 
  float:left; 
} 
 .child2{
  width:200px; 
  height:50px; 
  background:red; 
}
</style> 
</head> 
<body> 
   <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 오버플로를 지우는 방법은 무엇입니까? 오버플로:수레를 지우는 숨겨진 예

위 코드에서는 부모의 높이를 자동으로 설정하지 않았지만 부모는 표시합니다. 높이를 child1로 설정했기 때문에 Float는 문서 흐름에서 설정되고 분리되므로 상위에는 단 하나의 문서 흐름 요소인 child2만 있습니다. 따라서 이제 상위는 child2와 동일한 높이로 늘어납니다. 부모에 대한overflow:hidden 속성을 설정하면 어떤 영향이 있을까요? 특정 코드를 살펴보겠습니다

<html>
<head>
 <style type="text/css"> 
.parent{
 width:300px; 
 background:lightblue; 
 border:1px solid; 
 overflow: hidden;
} 
 .child1{
  width:100px; 
  height:100px; 
  background:pink; 
  float:left; 
} 
 .child2{
  width:200px; 
  height:50px; 
  background:red; 
}
</style> 
</head> 
<body> 
   <div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
  </div>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS에서 오버플로를 지우는 방법은 무엇입니까? 오버플로:수레를 지우는 숨겨진 예