CSS 플로트가 더 이상 사용되지 않습니까?

최근에 흥미로운 질문이 생겼습니다. CSS 그리드 및 Flexbox를 사용한 후 CSS 플로트 속성도 사용해야합니까?

짧은 대답

아니요! 또는 대부분의 경우 사용되지 않습니다. 요즘에는 텍스트가 포함 된 사진에만 사용하고 레이아웃에는 전적으로 사용하지 않을 것입니다.

더 길고 더 성가신 답변

Flexbox 및 그리드가 등장하기 전에 CSS 플로트 속성을 사용하여 그리드 및 레이아웃을 생성해야합니다. 사실, 이것은 웹 디자인을 학습 할 때 내가 접촉 한 첫 번째 속성입니다. 더운 여름 오후에 Jeffrey Zeldman의 "웹 표준 디자인"이라는 책을 열고 float: right 로 작은 빨간색 div를 옮겼습니다. 이것은 단순히 마술입니다! 플로트에는 큰 힘이 있습니다.

화면의 요소를 움직이는 것은 매우 간단하여 이제이 모바일 요소의 단순성 때문에 웹 디자인에 얼마나 많은 디자이너가 사랑에 빠졌는지 궁금합니다.

그러나 플로트로 복잡한 레이아웃을 구축하는 것은 항상 스톱 갭 솔루션이었습니다. 실제로 사진 주위에 텍스트를 유지하도록 설계되었습니다.

 <code>img { width: 150px; float: left; }</code>

플로트 문제는 큰 레이아웃과 잡지 스타일 그리드를 만들려고 할 때 시작됩니다. 그러나 우리는 그렇게 할 수밖에 없었습니다.

플로트 속성의 한 가지 문제는 플로팅 요소를 Clearfix라는 것으로 랩핑해야한다는 것입니다.

<code><div>
  <div>열</div>
  <div>열</div>
  <div>열</div>
</div></code>

<code>clearfix:after { content: ""; display: table; clear: both; }</code>

Jay Hoffman은 이전에 Clearfix 해킹을 설명했습니다.

Clearfix는 모르는 사람들을 위해 CSS 해킹으로, 두 개의 떠 다니는 요소가 나란히 쌓일 때 발생하는 지속적인 버그를 해결합니다. 요소가 이러한 방식으로 정렬되면 모 컨테이너의 높이가 0이되어 레이아웃을 쉽게 파괴 할 수 있습니다. 주 컨텐츠 블록의 왼쪽에 사이드 바를 배치 할 수도 있지만 결과는 두 요소가 서로 겹치고 붕괴됩니다. 더 복잡한 것은이 버그가 다른 브라우저에서 일치하지 않는다는 것입니다. Clearfix는 이러한 모든 문제를 해결하기 위해 발명되었습니다.

그 후 상황이 천천히 변하기 시작했습니다. 2017 년에 레이첼 앤드류 (Rachel Andrew)는 브라우저가 어떻게 해킹없이 클리어 픽스 문제를 처리 할 수 ​​있는지 설명했습니다. 동일한 수정을 달성하기 위해서는 다음 CSS 만 있으면됩니다.

 <code>.container { display: flow-root; }</code>

이상하게도, 나는 타이핑하기 3 분까지 flow-root 값의 존재를 몰랐다. 그러나 이것은 내가 다음에 말할 내용을 증명할 수 있습니다. CSS Grid와 Flexbox를 사용하면 실제로 부유물이 필요하지 않습니다. 이 속성은 원래 하나의 목적만으로 설계되었습니다. 텍스트가 그림을 둘러싸도록 허용합니다. 그러나 이제 그리드와 Flexbox를 사용하면 실제 레이아웃을 수행 할 수있는 강력한 기능이 있습니다.

내가 직장에서 가지고 있던 토론으로 돌아가십시오. 어떤 사람들은 코드베이스로 돌아가서 플로트 인스턴스가 매우 오래된 코드이기 때문에 플로트 박스 또는 그리드로 쉽게 교체 할 수 있기 때문에 모든 플로트 인스턴스를 삭제해야한다고 말합니다. 그러나 여기서 나는 "잠깐!"라고 말하고 싶습니다. 코드베이스의 일부 장소에서 플로트 속성을 유지하면 많은 손상이 발생한다고 생각하지 않습니다. 문제를 일으키는 방사성 코드가 아닙니다.

그렇다면 텍스트가 이미지를 감싸는 것 외에 다른 목적으로 CSS 플로트를 사용해야합니까? 아니요. 그러나 모든 CSS는 네트워크에서 즉시 플로트 선언을 정리해야합니다. 왜냐하면 "올바른"접근 방식이 아니기 때문입니까? 또한.

네트워크의 아름다움은 오래된 코드가 일을 깨지 않아야한다는 것입니다. 크리스에게 물어보세요. 가장 눈부신 CSS 속성이나 가장 멋진 트릭을 사용하지 않는 웹 사이트는 쓸모가 없거나 나쁘지 않습니다. 우리는 플로트를 더 나은 대안으로 교체했습니다. 이 CSS 속성이 현대 웹 디자인에 여전히 적용 가능한 사용 사례가 있기 때문에이 CSS 속성이 영원히있을 수 있다는 좋은 교훈이라고 생각합니다.

이것은 아주 좋습니다.

위 내용은 CSS 플로트가 더 이상 사용되지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!