CSS의 부동 및 정리에 대한 간략한 분석

프론트 엔드로서 많은 페이지 레이아웃을 작성했지만 플로팅은 항상 제가 거의 이해하지 못하는 사각지대였습니다. 한편으로는 플로팅을 사용하여 많은 레이아웃을 구현할 수 있지만 다른 한편으로는요. , 플로팅의 영향으로 인해 레이아웃이 파괴되고 두통이 발생하므로 오늘은 이 사각지대를 해결하기 위해 블로그 게시물을 작성하겠습니다.

이 기사에서는 주로 다음 문제를 논의합니다.
1. 플로팅의 원래 목적
2. 플로팅에 텍스트 줄바꿈 효과가 있는 이유
3. 🎜>

float의 원래 목적

다음 내용은 Zhang Xinxu의 "CSS Float(1)의 심층 연구, 자세한 설명 및 확장"에서 가져온 것입니다.

이제 CSS에 float(float) 속성이 없다고 가정하면 어떻게 보일 것입니까? 현재 플로팅 메서드를 사용하여 널리 구현되는 열 레이아웃이든 목록 정렬이든 다른 CSS 속성(테이블과 상관없이)을 사용하여 구현할 수 있다는 것을 알게 될 것입니다. 구현할 수 없는 유일한 것은 "이미지 주변의 텍스트"입니다. ". 저는 이미지 주위에 텍스트를 감싸는 방법이 생각나지 않습니다. 뭐, 이 대체할 수 없는 역할이 float의 진짜 의미죠.

한 문장으로 요약하자면:

이미지를 둘러싼 텍스트 효과를 구현합니다.

플로팅에 텍스트 줄바꿈 효과가 있는 이유는 무엇인가요? ​​

이 질문은 주로 과거 인상에서 비롯됩니다.

플로팅 요소는 문서와 분리되어 있습니다. 흐름.

어? 문서 흐름을 벗어나면 아래의 부동 요소와 겹쳐서는 안 되나요? 왜 텍스트가 계속 둘러싸일 수 있나요?

"CSS 마스터하기"라는 책을 보기 전까지는 이 문제가 저를 괴롭혔습니다. 기사 내용은 다음과 같습니다.

플로팅을 사용하면 요소가 문서 흐름에서 벗어나 더 이상 플로팅이 아닌 요소에 영향을 미치지 않습니다. 사실, 완전히는 아닙니다. 플로팅된 요소 뒤에 문서 흐름의 요소가 오면

이 요소의 상자는 플로트가 전혀 존재하지 않는 것처럼 동작합니다. 그러나 상자의 텍스트 내용은 플로트 요소 의 영향을 받아 공간을 만들기 위해 이동합니다.

즉,

플로팅 요소는 실제로 문서 흐름에서 벗어났기 때문에 문서 흐름의 블록 상자는 플로팅 요소를 무시하지만 텍스트는 을 무시합니다. 이는 문서 흐름에서 절대 위치 지정과는 다릅니다.

Zhihu에 대한 Zhang Qiuyi 선배의 답변도 이러한 견해를 확인시켜줍니다.

한 가지 추가 사항: 문서 흐름이라는 용어는 실제로 부정확합니다. W3C 표준에는 정상적인 흐름만 있지만, 시간이 지남에 따라 문서 흐름 측면에서 많은 국내 기사와 번역 서적이 문서 흐름을 사용합니다.

플로팅으로 인한 충격을 정리하는 방법

실제로 플로팅으로 인한 주요 충격은

1. 요소가 이탈되어 상위 요소 높이가 무너집니다. 일반 흐름에서

2. 아래의 비텍스트 요소가 플로팅 요소와 겹쳐서 원래 레이아웃을 파괴합니다.

이러한 효과를 정리하기 위해 많은 사람들이 클리어 클리어 속성을 사용할 수 있는 이유를 알고 있습니다.

두 가지 의견이 있습니다.

1. 브라우저는
요소의 위쪽 테두리가 요소의 아래쪽 바깥쪽 가장자리에 수직으로 떨어지도록 투명 요소 위에 충분한 여백 을 추가합니다. 부동 요소. 2.
깨끗한 요소의 상단 여백 위에 여백을 추가하세요. 여백 자체는 변경되지 않습니다.

전자가 CSS1과 CSS2의 구현 원칙이고, 후자가 CSS2.1의 구현 원칙이다. 그러나 어느 쪽을 달성하더라도 플로팅 요소를 위한 수직 공간이 남겨져 플로팅 효과가 해소되는 것 같습니다. 동시에, 설정된 클리어 요소 위에 채워진 공간은 실제로 일반 흐름에 존재합니다. 따라서 상위 요소의 높이가 늘어납니다.

수레를 제거하는 방법은 실제로 여러 가지가 있습니다. "그 해에 우리가 함께 청소한 수레" 기사에서는 수레를 청소하는 방법을 간단히 두 가지로 구분합니다.

1. 플로팅 요소 끝에 빈 요소를 추가하여, setclear: 두 속성 모두, 이후 의사 요소는 실제로 콘텐츠를 통해 요소 뒤에 점 콘텐츠가 있는 블록 수준 요소를 생성합니다.

2. 상위 요소의 오버플로 또는 디스플레이: 테이블 속성을 설정하여 부동 소수점을 닫습니다.

수레를 제거하는 거의 모든 방법은 이 두 가지 범주로 분류될 수 있습니다. 위의 블로그 게시물과 함께 의사 요소를 추가하는 방법에 대해 이야기해 보겠습니다.

1.display: block 을 사용하면 생성된 요소가 블록 수준 요소로 표시되고 나머지 공간을 차지합니다.

2. 문자가 매우 작으므로 내용에 점을 추가하세요.
3. 이 새로운 콘텐츠가 공간을 차지하고 레이아웃 높이를 파괴하는 것을 원하지 않기 때문에 높이를 0으로 설정합니다.
4. 생성된 콘텐츠가 보이지 않게 하려면 표시 여부를 숨김으로 설정하여 생성된 콘텐츠에 의해 가려질 수 있는 부분을 클릭하고 상호 작용할 수 있도록 합니다.
5.clear: 둘 다 플로팅 효과를 지웁니다.

코드는 다음과 같습니다.

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

이 방법은 대부분의 최신 브라우저에서 효과적이며 권장됩니다. 다른 방법은 온라인에 많이 있으므로 여기서는 자세히 설명하지 않겠습니다.

이 글은 링크가 첨부된 다른 블로그와 문서를 참고했습니다.

참조 링크:

CSS 클리어 속성

CSS float

CSS 플로트 이해 및 플로트 지우기

그 시절 우리가 함께 클리어한 플로트

noraml flow

CSS 플로트에 대한 심층 연구, 자세한 설명 및 확장(1 )

장추이의 답변

프론트 엔드로서 많은 페이지 레이아웃을 작성했지만 플로팅은 항상 제가 거의 이해하지 못하는 사각지대였습니다. 한편으로는 플로팅을 사용하여 많은 레이아웃을 구현할 수 있지만 다른 한편으로는요. , 플로팅의 영향으로 인해 레이아웃이 파괴되고 두통이 발생하므로 오늘은 이 사각지대를 해결하기 위해 블로그 게시물을 작성하겠습니다.

이 기사에서는 주로 다음 문제를 논의합니다.
1. 플로팅의 원래 목적
2. 플로팅에 텍스트 줄바꿈 효과가 있는 이유
3. 🎜>

float의 원래 목적

다음 내용은 Zhang Xinxu의 "CSS Float(1)의 심층 연구, 자세한 설명 및 확장"에서 가져온 것입니다.

이제 CSS에 float(float) 속성이 없다고 가정하면 어떻게 보일 것입니까? 현재 플로팅 메서드를 사용하여 널리 구현되는 것이 열 레이아웃이든 목록 정렬이든, 이를 구현하기 위해 다른 CSS 속성(테이블에 관계없이)을 사용할 수 있다는 것을 알게 될 것입니다. 구현할 수 없는 유일한 것은 "텍스트 감싸기"입니다. 그림". 이미지 주위에 텍스트를 배치할 방법이 생각나지 않습니다. 뭐, 이 대체할 수 없는 역할이 float의 진짜 의미죠.

한 문장으로 요약하자면:

이미지를 둘러싼 텍스트 효과를 구현합니다.

플로팅에 텍스트 줄바꿈 효과가 있는 이유는 무엇인가요? ​​

이 질문은 주로 과거 인상에서 비롯됩니다.

플로팅 요소는 문서와 분리되어 있습니다. 흐름.

어? 문서 흐름을 벗어나면 아래의 부동 요소와 겹쳐서는 안 되나요? 왜 텍스트가 계속 둘러싸일 수 있나요?

"CSS 마스터하기"라는 책을 보기 전까지는 이 문제가 저를 괴롭혔습니다. 기사 내용은 다음과 같습니다.

플로팅을 사용하면 요소가 문서 흐름에서 벗어나게 되며 더 이상 플로팅이 아닌 요소에 영향을 주지 않습니다. 사실, 완전히는 아닙니다. 플로팅된 요소 뒤에 문서 흐름의 요소가 오면

이 요소의 상자는 플로트가 전혀 존재하지 않는 것처럼 동작합니다. 그러나 상자의 텍스트 내용은 플로트 요소 의 영향을 받아 공간을 만들기 위해 이동합니다.

즉,

플로팅 요소는 실제로 문서 흐름에서 벗어났기 때문에 문서 흐름의 블록 상자는 플로팅 요소를 무시하지만 텍스트는 을 무시합니다. 이는 문서 흐름에서 절대 위치 지정과는 다릅니다.

Zhihu에 대한 Zhang Qiuyi 선배의 답변도 이러한 견해를 확인시켜줍니다.

한 가지 추가 사항: 문서 흐름이라는 용어는 실제로 부정확합니다. W3C 표준에는 정상적인 흐름만 있지만, 시간이 지남에 따라 문서 흐름 측면에서 많은 국내 기사와 번역 서적이 문서 흐름을 사용합니다.

플로팅으로 인한 충격을 정리하는 방법

실제로 플로팅으로 인한 주요 충격은

1. 요소가 이탈되어 상위 요소 높이가 무너집니다. 일반 흐름에서

2. 아래의 비텍스트 요소가 플로팅 요소와 겹쳐서 원래 레이아웃을 파괴합니다.

이러한 효과를 정리하기 위해 많은 사람들이 클리어 클리어 속성을 사용할 수 있는 이유를 알고 있습니다.

두 가지 의견이 있습니다.

1. 브라우저는
요소의 위쪽 테두리가 요소의 아래쪽 바깥쪽 가장자리에 수직으로 떨어지도록 투명 요소 위에 충분한 여백 을 추가합니다. 부동 요소. 2.
깨끗한 요소의 상단 여백 위에 여백을 추가하세요. 여백 자체는 변경되지 않습니다.

전자가 CSS1과 CSS2의 구현 원칙이고, 후자가 CSS2.1의 구현 원칙이다. 그러나 어느 쪽을 달성하더라도 플로팅 요소를 위한 수직 공간이 남겨져 플로팅 효과가 해소되는 것 같습니다. 동시에, 설정된 클리어 요소 위에 채워진 공간은 실제로 일반 흐름에 존재합니다. 따라서 상위 요소의 높이가 늘어납니다.

수레를 제거하는 방법은 실제로 여러 가지가 있습니다. "그 해에 우리가 함께 청소한 수레" 기사에서는 수레를 청소하는 방법을 간단히 두 가지로 구분합니다.

1. 플로팅 요소 끝에 빈 요소를 추가하여, setclear: 두 속성 모두, 이후 의사 요소는 실제로 콘텐츠를 통해 요소 뒤에 점 콘텐츠가 있는 블록 수준 요소를 생성합니다.

2. 상위 요소의 오버플로 또는 표시: 테이블 속성을 설정하여 부동 소수점을 닫습니다.

수레를 제거하는 거의 모든 방법은 이 두 가지 범주로 분류될 수 있습니다. 위의 블로그 게시물과 함께 의사 요소를 추가하는 방법에 대해 이야기해 보겠습니다.

1.display: block 을 사용하면 생성된 요소가 블록 수준 요소로 표시되고 나머지 공간을 차지합니다.

2. 문자가 매우 작으므로 내용에 점을 추가하세요.
3. 이 새로운 콘텐츠가 공간을 차지하고 레이아웃 높이를 파괴하는 것을 원하지 않기 때문에 높이를 0으로 설정합니다.
4. 생성된 콘텐츠가 보이지 않게 하려면 표시 여부를 숨김으로 설정하여 생성된 콘텐츠에 의해 가려질 수 있는 부분을 클릭하고 상호 작용할 수 있도록 합니다.
5.clear: 둘 다 플로팅 효과를 지웁니다.

코드는 다음과 같습니다.

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

이 방법은 대부분의 최신 브라우저에서 효과적이며 권장됩니다. 다른 방법은 온라인에 많이 있으므로 여기서는 자세히 설명하지 않겠습니다.

위 내용은 CSS의 부동 및 정리에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!