플로트 왼쪽은 무엇을 의미합니까? float 속성에 대한 모든 것

설명

float CSS 속성을 사용하면 설정한 값에 따라 상위 요소의 왼쪽 또는 오른쪽 가장자리에 요소를 띄워 요소를 부동으로 만들 수 있습니다. 플로팅 요소가 명시적으로 너비(너비)로 설정되지 않은 경우 콘텐츠에 맞게 너비가 축소됩니다.

브라우저는 HTML 문서 코드를 위에서 아래로 처리합니다. 코드 처리가 부동 요소에 도달하면 브라우저는 문서의 흐름에 따라 이를 먼저 배치합니다. 문서 코드에 있는 요소 아래에 있는 다음 일반 흐름에서 부동 요소를 제거하고 가능한 한 부모 요소의 왼쪽 또는 오른쪽 가장자리로 이동합니다.

플로팅 요소가 문서 흐름에서 제거되었으므로 코드에서 플로팅 요소 뒤에 오는 나머지 블록 수준 요소는 요소가 존재하지 않는 것처럼 제자리로 이동됩니다.

플로팅 요소가 일반 흐름에서 제거되더라도 인라인 콘텐츠는 여전히 영향을 받습니다. 블록 요소와 달리 플로팅 요소 뒤에 있는 코드에 있는 인라인 콘텐츠는 테두리를 고려하여 주변으로 흐릅니다. 즉, 텍스트가 플로팅 블록 주위를 둘러쌉니다.

텍스트 콘텐츠가 있는 플로팅 블록 대신 플로팅 이미지를 만들 수 있습니다. 이 경우 텍스트가 이미지를 감싸게 됩니다.

문서 이름

와 함께 CSS 사용 float 속성 이미지가 왼쪽에 떠 있게 되었습니다. HTML 코드의 이미지 아래에 있는 텍스트는 이미지의 오른쪽과 아래쪽을 둘러쌉니다.

노력하다 "

상위 요소의 너비가 허용하는 경우 둘 이상의 부동 요소를 동일한 행에 배치할 수 있습니다. 부모 요소의 너비가 충분하지 않으면 나머지 플로팅 요소와 일치하지 않는 플로팅 요소가 아래로 밀려납니다.

플로팅 요소는 부모의 높이에 영향을 미치지 않습니다. 즉, 일부 컨테이너가 있고 그 안에 플로팅 요소만 있는 경우 컨테이너의 높이는 0이 됩니다. 다음과 같은 방법으로 이 문제를 해결할 수 있습니다.

고정 높이 설정 - 컨테이너의 높이를 알고 있는 경우.
자동 또는 숨김의 오버플로 속성을 컨테이너에 적용하면 컨테이너 높이를 계산할 때 플로팅 요소가 고려됩니다. 이 방법은 컨테이너의 높이를 미리 알 수 없을 때 사용할 수 있습니다.

float 속성은 블록 요소에서만 작동하므로 float 속성이 다른 유형의 요소에 적용되면 블록 유형으로 변환됩니다.

참고: 절대 및 고정 배치 요소는 float 속성을 무시합니다. 또한 float 속성은 flexbox에 영향을 주지 않습니다.

계단식 테이블 서식 지정). 이 언어는 1996년부터 존재했으며 여전히 계속 발전하고 있습니다. 현재 개발자들은 이미 CSS의 세 번째 버전을 사용하고 있습니다. CSS 프로그래밍 언어를 사용하면 JavaScript를 전혀 사용하지 않아도 사용자에게 구식이거나 불편하지 않은 완전히 아름답고 쾌적한 사이트를 만들 수 있습니다. 세 번째 버전의 최신 기능을 사용하면 이 작업을 수행할 수 있습니다.

또한 개발자는 Flexbox 또는 Position과 같은 보다 편리한 서식 지정 옵션을 사용하여 사이트에서 요소의 위치를 변경할 수 있지만 가장 먼저 해야 할 일이 있습니다. 먼저 Float 속성의 장점과 단점을 이해해 봅시다.

CSS Float - 왜 필요한가요?

부동 - 요소 위치 지정에 대한 속성입니다. 매일 신문과 잡지의 페이지에서 볼 수 있으며 매우 깔끔하게 감싸는 사진과 텍스트를 봅니다. HTML 및 CSS 코드의 세계에서 Float 기능을 사용할 때 동일한 일이 발생해야 합니다. 그러나 이미지 편집이 항상 이 기능의 주요 목적은 아니라는 점을 기억할 가치가 있습니다. 2열, 3열, 4열로 사이트 요소의 인기 있는 배열을 만드는 데 사용할 수 있습니다. 실제로 Float CSS 속성은 거의 모든 html 요소에 적용됩니다. Float 기능을 사용하여 요소의 배열을 편집한 다음 속성을 편집하는 기본 사항을 알면 사이트 디자인을 만드는 것이 어렵지 않습니다.

특수 레이아웃 프로그램은 때때로 이미지를 인식하지 못하고 넘어갈 수 있습니다. 이미지 위로 올라가는 대신 텍스트가 이미지 옆이나 아래에 표시되지만(Float 속성이 잘못 적용된 경우) 개발자가 필요로 하는 위치는 항상 표시되지 않는다는 점만 고려하면 웹 디자인에서도 매우 유사한 일이 발생합니다.

CSS 부동 속성 설명

실제로 Float 속성을 사용하는 기능은 모든 웹 디자이너에게 아주 좋은 비결입니다. 그러나 불행하게도 이 기능이 어떻게 작동하는지에 대한 이해가 부족하면 사이트 요소의 충돌 및 이와 같은 다른 불만이 발생할 수 있습니다. 이전에도 브라우저의 버그로 인해 유사한 상황이 발생했습니다. 이제 Float 속성을 올바르게 사용하는 방법의 비밀이 공개되며 더 이상 문제가 발생하지 않아야 합니다.

Float 속성에는 네 가지 값이 있습니다.

부동:상속;
플로트:오른쪽;
왼쪽으로 뜨다;
플로트:없음;

영어를 아는 사람들에게는 Float 속성의 매개변수 값이 명확해야 합니다. 하지만 모르시는 분들을 위해 간단하게 설명드리겠습니다. 모수 :왼쪽;요소의 본문을 부모 요소의 가장 왼쪽 모서리로 이동합니다. bcgjkmpjdfybb 매개변수를 사용하면 동일한 일이 발생합니다(다른 방향으로만). :오른쪽;. 의미 :상속;부모와 동일한 설정을 취하도록 요소에 지시합니다. 이러한 요소는 html 코드에서 부모 요소 바로 내부에 위치하므로 자식 요소라고도 합니다. 속성 :없음;요소가 문서의 정상적인 흐름을 중단하지 않도록 허용하며 코드의 모든 부분에 대해 기본적으로 설정됩니다.

플로트는 어떻게 작동합니까?

Float CSS 속성은 매우 간단하게 작동합니다. 위에서 설명한 모든 것은 큰 어려움없이 수행 할 수 있습니다. 그러면 모든 것이 간단해질 것입니다. 그러나 Float 속성을 계속 사용하기 전에 약간의 이론을 이해하는 것이 좋습니다. 웹사이트의 각 요소는 블록입니다. 콘솔을 열어 쉽게 확인할 수 있습니다. 구글 크롬 Ctrl + Shift + J를 누르면 됩니다. 사이트의 텍스트, 제목, 이미지, 링크 및 기타 모든 구성 요소는 크기만 다른 블록으로 표시됩니다. 처음에는 이러한 모든 블록이 차례로 이동합니다. 아래 예에서 볼 수 있듯이 코드 줄은 서로 이어지므로 엄격하게 차례대로 표시됩니다.

이를 정상적인 흐름이라고 합니다. 이러한 흐름을 사용하면 모든 블록이 수직으로 서로 위에 놓입니다(요소의 본체를 교차하지 않음). 처음에는 웹 페이지의 모든 콘텐츠가 이러한 방식으로 배치됩니다. 그러나 예를 들어 Float Left CSS 언어 속성을 사용하면 요소가 페이지의 자연스러운 위치를 떠나 가장 왼쪽 위치로 이동합니다. 이러한 행동은 필연적으로 정상적인 경로에 남아있는 요소와의 충돌로 이어집니다.

즉, 요소가 수직으로 배치되는 대신 이제 서로 옆에 있습니다. 부모 요소에 충분한 공간이 있어 내부에 두 개의 자식을 배치할 수 있으면 충돌이 없지만 그렇지 않은 경우 한 객체를 다른 객체에 부과하는 것은 불가피합니다. CSS Float 속성이 작동하는 방식을 이해하려면 기억해야 할 매우 중요한 사항입니다.

문제 해결을 위한 명확한 기능

Float 함수에는 하트 친구가 있습니다. Clear입니다. Together they - 이 두 기능은 서로를 보완하고 개발자를 행복하게 합니다. 위에서 언급한 것처럼 인접 요소는 일반적인 흐름에서 벗어나 떠 있는 요소(예: CSS Float Top)와 마찬가지로 "부동"하기 시작합니다. 결과적으로 하나의 플로팅 요소 대신 두 개가 얻어지며 개발자가 배치하려는 위치에는 전혀 없습니다. 그 순간부터 모든 문제가 시작됩니다.

Clear 함수에는 5가지 값이 있습니다.

:왼쪽;
:오른쪽;
:둘 다;
:상속;
없음;

비유하자면 지우기 기능을 사용하는 것이 가장 좋은 때를 이해할 수 있습니다. 코드에 줄이 있으면 플로트:오른쪽;(CSS 코드를 의미함) 함수는 다음과 같아야 합니다. 지우기:오른쪽;. 동일한 스윙 및 속성 왼쪽으로 뜨다;그것을 보완 할 것입니다 지우기:왼쪽;. 코드를 작성할 때 지우기: 둘 다;이 함수가 적용된 요소는 Float 함수가 적용된 요소보다 아래에 있는 것으로 나타났습니다. 상속은 상위 요소에서 설정을 가져오고 없음은 사이트 구조를 변경하지 않습니다. Float 및 Clear 기능의 작동 방식을 이해하면 고유하고 특이한 HTML 및 CSS Float 코드를 작성하여 웹 사이트를 독특하게 만들 수 있습니다.

Float를 사용하여 열 만들기

Float 속성은 사이트에서 열을 만들 때(또는 웹 페이지 중앙에 CSS Float 콘텐츠를 배치할 때) 특히 유용합니다. 가장 실용적이고 편리한 코드이므로 친숙한 2열 웹 사이트 템플릿을 만들기 위한 몇 가지 옵션을 고려해 볼 가치가 있습니다. 예를 들어 왼쪽에 콘텐츠가 있고 오른쪽에 내비게이션 바가 있고 머리글과 바닥글이 있는 표준 웹 사이트를 가정해 보겠습니다. 코드는 다음과 같습니다.

이제 여기에 쓰여진 내용을 파악해야 합니다. HTML 코드의 본문을 포함하는 상위 요소를 컨테이너라고 합니다. Float 기능이 적용된 요소가 서로 다른 방향으로 흩어지는 것을 방지할 수 있습니다. 그것이 없다면 이러한 요소는 브라우저의 바로 그 경계까지 떠내려갈 것입니다.

그런 다음 코드에는 #content 및 #navigation이 있습니다. Float 함수는 이러한 요소에 적용됩니다. #콘텐츠는 왼쪽으로 이동하고 #내비게이션은 오른쪽으로 이동합니다. 이는 2열 사이트를 만드는 데 필요합니다. 개체가 서로 겹치지 않도록 너비를 지정해야 합니다. 너비는 백분율로도 지정할 수 있습니다. 픽셀보다 훨씬 편리합니다. 예를 들어 #content는 45%, #navigation은 45%, 나머지 10%는 margin 속성에 줍니다.

#footer에 있는 Clear 속성은 바닥글이 #navigation 및 #content를 따라가는 것을 방지하지만 원래 위치에 그대로 둡니다. 무슨 일이 일어날 수 있습니까? Clear 속성을 지정하지 않으면? 이 코드에서 #footer는 단순히 위로 이동하여 #navigation 아래에 있습니다. 이는 #navigation에 하나 이상의 요소를 수용할 수 있는 충분한 공간이 있기 때문에 발생합니다. 이 예시는 Clear 및 Float 속성이 서로를 보완하는 방법을 매우 명확하게 보여줍니다.

코드를 작성할 때 발생할 수 있는 문제

위의 예는 매우 간단합니다. 그러나 그들은 또한 문제가 될 수 있습니다. 일반적으로 Float 기능을 사용하면 실제로 예상치 못한 많은 문제가 발생할 수 있습니다. 이상하게 보일 수 있지만 일반적으로 문제는 CSS가 아니라 html 코드에서 발생합니다. Float 기능이 있는 요소가 html 코드에서 위치하는 위치는 후자의 작동에 직접적인 영향을 미칩니다. 여러 가지 어려움을 피하려면 간단한 규칙을 따르는 것이 가장 좋습니다. 코드에서 먼저 Float 함수가 있는 요소를 배치합니다. 이것은 거의 항상 작동하며 예기치 않은 동작을 최소화합니다.

요소의 충돌

충돌은 여러 자식을 포함하는 부모 요소가 모두 수용할 수 없고 겹칠 때 발생합니다. 요소가 표시되지 않고 사이트에서 사라지는 경우도 있습니다. 이것은 브라우저 버그가 아니라 Float 기능이 있는 요소의 예상되고 적절한 동작입니다.

이러한 요소는 정상적인 흐름에서 처음에 있고 Float 속성에 의해 위반되기 때문에 브라우저는 사이트 페이지에서 해당 요소를 제거할 수 있습니다. 그러나 솔루션이 간단하고 명확하므로 절망하지 마십시오. Cear 속성을 사용하십시오. 아마도 이 문제를 해결하는 모든 방법 중에서 Clear가 가장 효과적일 것입니다.

그러나 웹 페이지 요소의 충돌 문제는 다른 방식으로 해결할 수 있습니다. 적어도 두 가지 방법이 더 있습니다.

위치 기능 사용;
플렉스박스 애플리케이션.

Position 함수는 때때로 CSS Float에 대한 좋은 대안입니다. 위치를 사용하는 경우 웹 페이지 중앙에 이미지를 배치하는 것이 가장 좋습니다. :absolute 및 :relative 값을 올바르게 적용하면 요소가 제자리에 들어가 겹치지 않습니다.

Position 및 Float 함수의 코드 구문 분석

HTML 및 CSS 코드에서 Float를 Position으로 대체하는 방법을 더 자세히 이해할 가치가 있습니다. 실제로 매우 간단합니다. #container 및 #div 요소가 있다고 가정해 보겠습니다.

이 예에서 두 번째 컨테이너의 (CSS Div) Float 함수를 사용하면 표준 2열 웹 사이트를 만드는 데 도움이 됩니다. 지우기 기능을 잊지 마십시오. 그것 없이는 서로 위에 요소의 중첩 만 나타납니다.

그렇다면 Postion을 사용하기 위해 CSS 및 Float 코드를 어떻게 변경합니까? 매우 간단합니다.

위치:상대;

이 경우 #container 및 #div는 개발자가 필요로 하는 부모 요소의 위치를 차지합니다. 기본? 크기와 일치하는 동일한 부모 요소에 #div 및 #container를 넣습니다.

Flexbox - 이 기능이 CSS Float를 어떻게 대체할 수 있습니까?

Flexbox는 현재 웹 사이트를 만드는 가장 진보된 방법이므로 이전 브라우저에서는 이 기능을 지원하지 않습니다. 오래된 버전의 브라우저를 사용하는 사용자는 사이트의 올바른 버전을 볼 수 없기 때문에 이 사실을 무시해서는 안 됩니다.

Flexbox는 속성이 아니라 별도의 모듈입니다. 따라서 flexbox는 그것과만 작동하는 여러 속성을 지원합니다. 또한 inline, block 및 inline-block의 세 가지 매개변수가 있는 표시 기능에는 flexbox에 하나의 flex-flow만 남아 있습니다.

Flexbox는 어떻게 작동합니까?

이 기술은 개발자가 요소를 수평 및 수직으로 쉽게 정렬하는 데 도움이 됩니다. Flexbox는 항목이 표시되는 방향과 순서를 변경할 수도 있습니다. 이 기술에는 전체 Flexbox가 구축되는 주축과 교차축의 두 축이 있습니다. 또한 Float 및 Clear 기능의 효과를 제거합니다. 고유한 속성을 사용하는 코드로 시스템을 구축하므로 불행하게도 요소에서 부동 및 위치와 같은 다른 속성을 복제할 수 없습니다. 위에서 언급했듯이 Flexbox는 새 버전의 브라우저에서만 작동하기 때문에 이것은 매우 유용할 것입니다.

결국 Position, Flexbox 및 Float는 동일한 작업을 수행한다는 점을 기억할 가치가 있습니다. 사이트에 대해 독특하고 독창적인 디자인을 만듭니다. 이 문서에서 설명하는 각 옵션은 고유한 방식으로 이를 수행하므로 장점과 단점이 모두 있습니다. 또한 Float 기능이 완벽한 곳 (예 : 간단한 구조의 사이트)에서 Position 또는 Flexbox를 사용하는 것이 더 좋은 곳이 발생합니다.

이중 마진 버그

그러나 불행히도 때때로 각 개발자는 작성된 코드가 아니라 특정 유형의 브라우저의 버그와 관련된 문제가 있습니다. 예를 들어, 인터넷 익스플로러 Double Margin Bug라는 버그가 있습니다. 사이트 요소가 브라우저 경계를 넘어 이동하도록 하는 Margin 매개변수에 2를 곱합니다. 이를 방지하려면 여백 매개변수를 백분율로 지정하는 것으로 충분합니다. 일반적으로 이 버그는 Margin 및 Float 속성 값이 동일한 경우에 발생합니다.

margin-left:10px;

이렇게 하면 Internet Explorer에서 요소가 20px 왼쪽으로 이동합니다. 다음과 같이 코드를 변경할 수 있습니다.

마진-왼쪽:10%;

그 쯤,

margin-right:10px;

이 두 옵션 모두 요소 이동 문제를 해결합니다.

브라우저 버그 및 사이트의 잘못된 표시

Internet Explorer가 버그가 발생할 수 있는 유일한 브라우저가 아니라는 점을 기억할 가치가 있습니다. 오래된 구글 버전 Chrome과 Mozilla는 최신 웹사이트의 일부 요소도 잘못 렌더링합니다. 이러한 각 버그에 대해 솔루션을 찾을 수 있습니다. 일반적으로 Float를 사용하면 원본이 생성되고 매력적인 디자인대지. 이 기능의 기본과 원리를 이해하면 실수를 피하고 모든 개발자의 삶을 더 쉽게 만드는 데 도움이 됩니다.

HTML 페이지에 나타나는 모든 요소는 직사각형에 불과합니다. 기본적으로 두 가지 유형만 있습니다.

블록(blok)은 현재 위치의 전체 너비를 차지하며 위와 아래에 있는 것과 분리됩니다. 예를 들어 DIV, P, H 태그입니다.
내장(인라인). 예를 들어, SPAN, STRONG, EM, A 및 IMG입니다.

테이블.

table-layout에서 div-layout으로 넘어가면서 속성의 역할이 커졌습니다. float를 사용하면 웹 개발자가 테이블에 의존하지 않고 열을 포함할 수 있기 때문입니다. 값을 가질 수 있습니다 오른쪽, 왼쪽, 하지만 센터.

이전에는 페이지 레이아웃이 다음을 사용하여 수행되었습니다. 테이블.

table-layout에서 div-layout으로 전환한 후 float 속성의 역할이 커졌습니다. float를 사용하면 웹 개발자가 테이블에 의존하지 않고 열을 포함할 수 있기 때문입니다. 값을 가질 수 있습니다 오른쪽, 왼쪽, 하지만 센터.

디스플레이: 블록; 또는 디스플레이: 인라인; 우리는 한 유형의 직사각형을 다른 유형으로 변환하고 있습니다. 예를 들어 여러 LI 블록이 있는 UL 목록을 수평으로 배치할 수 있습니다.

float 속성을 사용하는 경우 사각형은 블록 사각형이지만 트위스트가 있습니다. 너비가 전체 콘텐츠에 걸쳐 있지 않습니다. 예를 들어 h3 제목은 다음과 같습니다.

헤더 h3입니다.

display: inline; 속성을 설정하면 너비뿐만 아니라 요소 위와 아래의 거리도 변경된 것을 볼 수 있습니다.

헤더 h3입니다.

그러나 요소를 오른쪽에 배치하고 text-align:right를 추가하려는 경우 이번에는 다음과 같은 결과가 나타납니다.

헤더 h3입니다.

그리고 꽤 다르게 if float: right;. 요소 위와 아래의 간격은 동일하게 유지됩니다.

헤더 h3입니다.

제목 옆의 요소는 어떻게 작동합니까?

플로팅 요소는 생성된 줄보다 높게 배치할 수 없기 때문에 상단 텍스트는 변경되지 않은 상태로 유지됩니다.

헤더 h3입니다.

그러나 빨간색 텍스트는 제목 아래에 있으며 추가 스타일 없이 제목 주위로 흐릅니다. 그리고 h3 높이를 극복하는 즉시 페이지는 자연 순서로 돌아갑니다.

A B C D 여러 부동 요소는 해당 위치의 순서를 따릅니다.

ㅏ비안에G텍스트...

그리고 정렬은 같은 쪽에 있는 문자의 맨 아래 가장자리를 따라 이루어집니다.

A B C D 어떤 순간(여기에서) 명확한 속성이 적용됩니다. 빈 태그에 추가할 수 있습니다.

여러 블록 사각형을 균등하게 배치하려면 동일한 너비를 지정하십시오.

블록 1

블록 2

블록 3

블록 4

블록 사이의 간격은 어디입니까? 설정하면 플로팅 요소에 충분한 공간이 없기 때문에 아래로 이동합니다.

블록 1

블록 2

블록 3

블록 4

다른 DIV를 추가하면 문제가 해결됩니다.

블록 1

블록 2

블록 3

블록 4

테이블 형식의 레이아웃은 매우 편리하고 이해하기 쉬우므로 아마도 아날로그 디스플레이인 table;이 등장한 것 같습니다. 더 적은 코드로 동일한 모양을 얻을 수 있습니다.

블록 1

블록 2

블록 3

블록 4

, 여기서 border-spacing은 셀 테두리 사이의 수평 및 수직 간격을 지정합니다.

이제 이미지 갤러리가 어떻게 구축되었는지 확인할 수 있습니다. 잊지 않으셨으면 좋겠습니다.

텍스트...

출처 링크:

요소를 정렬할 측면을 결정하고 다른 요소는 다른 측면에서 주변을 둘러쌉니다. float 속성의 값이 none 이면 요소 자체가 요소 자체와 같은 줄에 줄 바꿈 텍스트 한 줄을 허용하면서 페이지에서 요소가 정상적으로 렌더링됩니다.

간단한 정보

통사론

플로트: 왼쪽 | 오른쪽 | 없음

표기법

	설명	예
<тип>	값의 유형을 지정합니다.	<размер>
에이앤앤비	값은 지정된 순서대로 출력되어야 합니다.	<размер> && <цвет>
A \| 비	제안된 값(A 또는 B) 중 하나만 선택해야 함을 나타냅니다.	정상 \| 작은 모자들
에이 \|\| 비	각 값은 단독으로 사용하거나 임의의 순서로 다른 값과 함께 사용할 수 있습니다.	폭 \|\| 세다
	값을 그룹화합니다.	[ 자르기 \|\| 십자가]
*	0회 이상 반복합니다.	[,<время>]*
+	한 번 이상 반복합니다.	<число>+
?	지정된 유형, 단어 또는 그룹은 선택 사항입니다.	삽입?
(A, B)	A회 이상 반복하되 B회 이하로 반복합니다.	<радиус>{1,4}
#	쉼표로 구분하여 한 번 이상 반복합니다.	<время>#

가치

왼쪽 요소를 왼쪽에 정렬하고 텍스트와 같은 다른 모든 요소는 오른쪽으로 둘러쌉니다. right 요소를 오른쪽으로 정렬하고 다른 모든 요소는 왼쪽으로 둘러쌉니다. 없음 요소 래핑이 설정되지 않았습니다.

모래 상자

Winnie the Pooh는 특히 아침 11시에 약간의 다과를 싫어하지 않았습니다. 그 당시 아침 식사는 끝난 지 오래되었고 저녁 식사는 시작할 생각조차하지 않았기 때문입니다. 그리고 물론 그는 토끼가 컵과 접시를 꺼내는 것을 보고 매우 기뻤습니다.

img ( float: (( 운동장값 )) ; )

예

뜨다

행동주의는 아무리 역설적으로 보일지라도 승화된 자극을 계몽합니다. 예를 들어 Richard Bandler는 효과적인 상태를 구축하기 위해 하위 양식의 변화를 사용했습니다.

이 예제의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. float 속성 사용

개체 모델

객체.style.css플로트

메모

Internet Explorer 6에는 상위 요소 내에 중첩된 부동 요소에 대한 왼쪽 또는 오른쪽 패딩 값이 두 배가 되는 버그가 있습니다. 부모 측면에 인접한 패딩은 두 배가 됩니다. 이 문제는 일반적으로 플로팅 요소에 display: inline을 추가하면 해결됩니다. 이 브라우저는 또한 float 값으로 지정된 방향으로 3px 패딩(소위 "3픽셀 버그")을 추가합니다.

사양

각 사양은 여러 승인 단계를 거칩니다.

추천(Recommendation) - 규격은 W3C의 승인을 받아 표준으로 추천된다.
후보자 추천 ( 가능한 추천) - 표준을 담당하는 그룹은 표준이 목표를 충족한다고 만족하지만 표준을 구현하려면 개발 커뮤니티의 지원이 필요합니다.
제안된 권장 사항( 추천 추천) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문 위원회에 제출됩니다.
작업 초안 - 커뮤니티 검토를 위해 토론 및 수정을 거친 보다 성숙한 초안입니다.
편집자 초안( 편집 초안)는 프로젝트 편집자가 변경한 후의 표준 초안 버전입니다.
초안 ( 사양 초안)는 표준의 첫 번째 초안 버전입니다.

브라우저

다음 표기법은 브라우저 테이블에서 사용됩니다.

Float 속성은 HTML 및 CSS로 작업하는 웹 개발자에게 중요하고 강력한 자산입니다. 반면에 이 기능이 어떻게 작동하는지 완전히 이해하지 못한다면 상당히 실망스럽고 혼란스러울 수 있습니다.

기사 번역 CSS 플로트 101. 원본 alistapart.com

또한 예전에는 브라우저의 다소 고약한 버그로 인해 속성을 사용할 때 긴장하는 것이 일반적이었습니다. 뜨다 CSS 규칙 세트에서. 그러나 우리의 신경을 진정시키고 실망을 완화하도록 노력합시다. float 속성이 요소에 대해 정확히 무엇을 하는지, 어떻게 편리하게 사용하는지 보여드리겠습니다.

우리는 왼쪽이나 오른쪽에 이미지가 있고 그 주위에 아름답게 배열된 텍스트가 있는 잡지 기사를 볼 때 인쇄 세계에서 매일 떠다니는 것을 봅니다. HTML/CSS 세계에서 텍스트는 해당 이미지에 적용되는 float 속성에 따라 이미지 주위를 둘러쌉니다. 이미지에 float 속성을 사용하는 것은 많은 예 중 하나일 뿐입니다. 또 다른 예로 float 속성을 사용하면 인기 있는 2열 레이아웃을 매우 쉽게 만들 수 있습니다. 실제로 float 속성을 HTML의 모든 요소에 적용할 수 있습니다. position 속성과 함께 float 속성의 사용법을 배우고 이해하면 레이아웃을 만들 때 편안하고 자신감을 가질 수 있습니다.

플로트 정의

무엇인지 정의하는 것으로 시작하겠습니다. 뜨다.

플로트는 일반적으로 현재 줄을 따라 오른쪽 또는 왼쪽으로 이동하는 상자입니다. 플로트의 가장 흥미로운 특징은 콘텐츠가 측면을 따라 흐를 수 있다는 것입니다. float: left가 적용되면 내용물이 오른쪽 아래로 상자를 감싸고 마찬가지로 float: right도 왼쪽 아래로 흐릅니다.

float 속성에는 사용할 수 있는 4가지 값이 있습니다: left , right , inherint 및 none . 각 의미는 매우 명확합니다. 예를 들어 요소에서 float: left를 사용하면 상위 요소의 가장 왼쪽 테두리로 이동합니다. 그리고 float: right 를 설정하면 요소가 마찬가지로 오른쪽으로 이동합니다. ihnerit 값은 부모 요소에서 속성을 상속하도록 요소에 지시합니다. 그리고 마지막 값 none은 기본값이며 속성을 적용하지 말라고 합니다. 뜨다이 요소에.

#container( 너비: 960px; 여백: 0 auto; ) #content( float: 왼쪽; 너비: 660px; 배경: #fff; ) #navigation( float: 오른쪽; 너비: 300px; 배경: #eee; ) #footer( 지우기: 둘 다; 배경: #aaa; 패딩: 10px; )

#바닥글이 #navigation 블록 아래에 있습니다. 이것은 #navigation 블록 아래에 #footer를 위한 공간이 있고 이것이 정상적인 블록 흐름에 대한 올바른 동작이기 때문에 발생했습니다. 하지만, 이것은 우리에게 절대 필요한 것이 아니죠? 나는 당신이 이미 float와 clear 사이의 관계를 보고 그들이 어떻게 서로를 보완하는지 이해하고 있다고 가정합니다.

나와 같은 강박 장애가 있는 경우 예 F에서 #content 및 #navigation 열의 높이가 다른 것을 알아차렸을 수 있습니다. 이를 해결하는 방법에는 여러 가지가 있지만 이 문서의 범위를 벗어납니다. 내부 내용물에 관계없이 블록을 같은 높이로 만드는 방법을 배우려면 Dan Cederholm의 Faux Columns를 읽는 것이 좋습니다.

먼저 플로트

지금까지 우리는 예쁜 것을 보았습니다. 간단한 예그것은 많은 두통을 일으키지 않습니다. 그러나 float 속성을 사용할 때 주의해야 할 몇 가지 함정이 있습니다. 놀랍게도 가장 큰 함정 중 하나는 CSS가 아니라 HTML과 관련이 있습니다. 부동 요소를 HTML 안에 넣으면 다른 결과가 나올 수 있습니다. 예 H를 살펴보십시오.

여기에 float:right 속성이 있는 이미지와 주변 텍스트가 있는 작은 블록이 있습니다. CSS는 다음과 같습니다.

#container( 너비: 280px; 여백: 0 자동; 패딩: 10px; 배경: #aaa; 테두리: 1px 단색 #999; ) img( float: 오른쪽; )

#container 상위 요소는 폭이 좁고 부동 요소(이미지)를 경계 내에서 유지합니다. HTML 코드는 다음과 같습니다.

이 예제는 원하는 결과를 제공하지만 HTML의 일부 요소를 가져와 재정렬하면 어떻게 될까요? 예 I에서 나는 이사 문자 후

이것은 작은 상자 안에 포함된 텍스트입니다. HTML에서 부동 요소를 다른 순서로 배치하면 레이아웃에 어떤 영향을 미칠 수 있는지에 대한 예로 이것을 사용하고 있습니다. 예를 들어 오른쪽에 있어야 하는 이 멋진 사진 자리 표시자를 살펴보세요.

우리의 결과는 우리가 기대했던 것과 다릅니다. 이미지가 오른쪽으로 이동했지만 더 이상 원하는 대로 상단 모서리에 있지 않고 단락 아래로 떨어졌습니다. 설상가상으로 #container 부모 요소의 아래쪽에서 튀어나옵니다. 무슨 일이야?

먼저. 내가 찾은 내 규칙은 요소를 먼저 플로팅하는 것입니다. 내 HTML에서 나는 거의 항상 마크업의 시작 부분에 플로팅 요소를 추가하고 플로트가 상호 작용할 플로팅되지 않은 요소(예: 위 예제의 단락) 앞에 추가합니다. 대부분의 경우 긍정적인 결과를 제공합니다.

둘째. 이미지가 맨 아래의 #container 블록 밖으로 튀어나온 것처럼 보이는 이유는 축소라는 현상 때문입니다. 붕괴와 해결책에 대해 이야기합시다.

무너지다

축소는 중첩된 요소가 부동되지 않은 경우와 같이 부동 요소가 있는 요소가 중첩된 요소 주변의 경계를 확장하지 않는 경우입니다.

이제 이전처럼 문서에 HTML을 추가하는 대신 CSS로 이 문제를 해결해 보겠습니다. 부모 요소가 모든 부동 요소 다음에 clear 속성을 "적용"할 수 있도록 하는 메서드가 있습니다. 이것은 hidden 값이 있는 overflow CSS 속성을 사용하여 수행됩니다. overflow 속성은 이러한 용도로 사용하기 위한 것이 아니며 콘텐츠가 숨겨지거나 원하지 않는 스크롤 막대가 나타나는 등의 문제가 발생할 수 있습니다. 그러나 이 예에서는 여전히 overflow: hidden 속성을 #container 부모 요소에 적용합니다.

#container(오버플로: 숨김; 너비: 260px; 여백: 0 자동; 패딩: 10px 0 10px 10px; 배경: #aaa; 테두리: 1px 단색 #999; )

그리고 마지막으로, 에릭 마이어그의 기사 Containing Floats에서 이 문제에 대한 세 번째 해결책을 설명합니다. CSS 사양 2.1에 따르면:

float 속성이 있는 요소는 포함된 부동 요소로 범위를 확장합니다.

따라서 float 속성을 #container 에 적용하면 위에서 설명한 방법과 유사하게 컨테이너에 이미지와 단락이 포함됩니다.

궁극적으로 이러한 모든 솔루션은 동일한 작업을 수행합니다. 부모 요소가 흐름에서 플로팅된 요소를 고려하도록 강제합니다. 각 방법에는 고유한 장점과 유용성이 있습니다. 각 항목을 이해한 다음 상황에 가장 적합한 항목을 적용해야 합니다.

결론

float 속성을 사용하면 레이아웃 기술을 크게 향상시킬 수 있습니다. 이 속성이 작동하는 방식과 동작에 영향을 미치는 요소를 이해하면 float를 효과적으로 사용하기 위한 견고한 기반이 제공됩니다.