CSS3에서 수레를 지우는 여러 가지 방법은 무엇입니까

방법: 1. 빈 div 태그에 "clear:both" 스타일을 설정하여 부동 소수점을 지웁니다. 2. 상위 요소에 ":after" 의사 요소를 추가하고 의사의 부동 소수점을 지워 부동 소수점을 지웁니다. -element; 3. 오버플로 스타일을 상위 요소로 설정하면 속성 값이 표시되지 않더라도 부동소수점을 지울 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS3에서 플로트를 지우는 여러 가지 방법은 무엇입니까?

Float(float)는 플로팅 상자가 다른 플로팅 상자나 외부 가장자리에 있는 포함 상자를 만날 때까지 왼쪽 및 오른쪽으로 이동하도록 제어할 수 있습니다. 플로팅 상자는 문서 흐름의 일반적인 흐름에 속하지 않습니다. 요소가 플로팅되면 블록 수준 요소의 레이아웃에 영향을 주지 않고 인라인 요소의 레이아웃에만 영향을 미칩니다.

이때 문서 흐름의 일반적인 흐름에서는 플로팅 상자에 동일한 레이아웃 모드가 없는 것으로 표시됩니다. 컨테이너 박스의 높이가 플로팅 박스보다 작을 경우 "높이 붕괴"가 발생합니다:

위 그림에서 상위 요소의 높이는 패딩 효과이며, 상위 요소에는 높이가 설정되지 않았습니다. .

상위 요소의 높이가 설정되지 않은 경우:

상위 요소의 하위 요소가 부동으로 설정되지 않은 경우 상위 요소의 높이가 자동으로 확장되고 높이 값이 표시됩니다. 상위 요소의 하위 요소가 부동으로 설정되지 않았습니다. 요소가 부동으로 설정된 경우 상위 요소의 높이가 자동으로 확장되지 않으며 높이 값이 없습니다.

이러한 방식으로 float를 설정한 후에는 다음과 같은 몇 가지 문제가 있습니다.

부모 요소의 여백이 영향을 받고 위, 아래, 왼쪽, 오른쪽에 중심을 맞출 수 없습니다.

높이가 상위 요소가 설정되지 않은 경우, 플로팅 후 상위 요소의 높이가 늘어나지 않습니다. 그러면 상위 요소가 디스플레이에 표시되지 않습니다.

코드에 빈 div 태그를 넣은 다음 페이지에서 float의 영향을 없애려면 이 태그에clear:both를 설정하세요. 장점은 단순성, 편의성 및 좋은 호환성이지만 구조적 혼란을 야기하고 향후 유지 관리에 도움이 되지 않기 때문에 일반적으로 이 방법을 사용하지 않는 것이 좋습니다.

상위 요소는 :after 의사 요소를 추가합니다. 의사 요소의 부동을 지워 상위 요소의 높이를 지원하는 목적을 달성합니다.

.clearfix:after{ content:""; display:block; visibility:hidden; clear:both; }

부모 요소의 오버플로 스타일을 설정할 때 오버플로:숨김이든 오버플로:자동이든 해당 값이 표시되지 않는 한 플로트를 지울 수 있습니다. 그 본질은 BFC를 구성하여 지원 효과를 내는 것입니다. 상위 요소의 높이가 달성되었습니다

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

(동영상 공유 학습 :

)

위 내용은 CSS3에서 수레를 지우는 여러 가지 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!