5 가지 질문에서 CSS 플로트 설명

CSS "플로트"(플로팅 요소)는 사용하기 쉽지만 한 번 사용하면 주변 요소에 미치는 영향이 예측할 수없는 경우가 있습니다. 당신이 아픈 엄지 손가락처럼 찌르던 근처의 요소들이 사라지거나 떠 다니는 문제를 보아왔다면 더 이상 걱정할 필요가 없습니다..

이 게시물은 플로팅 요소에서 전문가가되는 데 도움이되는 다섯 가지 기본 질문을 다루고 있습니다..

1. 어떤 요소가 뜨지 않는지?
2. 엘리먼트가 떠있을 때 엘리먼트에 어떤 변화가 생깁니 까??
3. "수레"의 형제들은 어떻게됩니까??
4. "부유물"의 부모에게 일어나는 일?
5. "수레"를 어떻게 정리합니까??

TL에 접근하는 독자에게, 삶의 접근 방식은 게시물의 끝 부분에 요약되어 있습니다..

1. 떠오르지 않는 요소?

안 순수한 또는 고정 된 위치 된 요소 뜨지 않을 것이다. 따라서 다음에 플로트가 작동하지 않으면 플로트가 있는지 확인하십시오. 직위 : 절대 또는 게재 순위 : 고정 그에 따라 변경 사항을 적용하십시오..

2. 엘리먼트가 떠있을 때 엘리먼트에 어떤 일이 생깁니 까??

요소에 "float"태그가 지정되면 기본적으로 왼쪽 또는 오른쪽으로 실행됩니다. 용기 요소의 벽을 때린다.. 또는, 이미 같은 벽에 부딪친 다른 떠 다니는 요소를 때린다.. 공간이 없어 질 때까지 그들은 계속 나란히 쌓일 것이고, 새로 들어오는 것들은 아래로 내려갈 것입니다..

플로팅 요소들 요소 위에 올라가지 않을 것이다. 전에 그것 코드에서 코딩하기 전에 고려해야 할 사항 “흙손” 후 옆으로 띄우고 싶은 요소.

플로팅 된 요소에 어떤 유형의 요소가 떠 다니는 지에 따라 두 가지 더 발생합니다.

(1) 인라인 요소는 블록 수준 요소로 바뀝니다. 떠있을 때.

왜 갑자기 높이와 너비를 플로팅에 할당 할 수 있는지 궁금한가요? 스팬? 모든 요소가 부 풀릴 때 값을 얻을 수 있기 때문입니다. 블록 그것의 디스플레이 속성 (인라인 테이블 얻을 것이다 표) 블록 레벨 요소 만들기.

(2) 지정되지 않은 너비의 블록 요소는 부울 때 내용에 맞게 축소됩니다..

일반적으로 블록 요소에 너비를 지정하지 않으면 너비가 기본값 인 100 %가됩니다. 그러나 떠올랐다면 더 이상 그렇지 않습니다. 블록 요소의 상자는 내용이 보이기까지 축소됩니다..

3. "수레"의 형제들은 어떻게됩니까??

요소들 사이에 요소를 뜨기로 결정할 때 그것이 어떻게 동작 할 것인가에 대해 걱정하지 않아야합니다. 그 동작은 예측 가능할 것이며 왼쪽이나 오른쪽으로 움직일 것입니다. 당신이 정말로 생각해야 할 것은 무엇입니까? 그 후 형제들이 어떻게 행동 할 것인가?.

"수레"는 전 세계에서 가장 돌보고 순종하는 형제 자매입니다. 그들은 떠있는 요소를 수용 할 수있는 모든 것을 할 것입니다..

그만큼 텍스트 및 인라인 요소 간단하게 "수레"를위한 길을 만들고 "수레" 위치에있을 때.

그만큼 블록 요소들 더 나아가서 "플로트" "Float"을위한 공간을 만들기 위해 자신의 자식 요소를 쫓아내는 것을 의미하더라도,.

이것을 실험에서 확인해 봅시다. 아래는 파란 상자이며, 일부 자식 요소가있는 동일한 크기의 빨간색 상자가 표시된 후입니다..

이제 파란색 상자를 뜨고 빨간색 상자와 그 자녀들이 어떻게되는지 봅시다..

빨간색 상자가 파란 상자를 포 함하는 것을 멈추면 사용할 수있는 모든 것이 잘됩니다. 오버플로 : 숨김.

추가 할 때 오버플로 : 숨김 float을 감싸고있는 요소에, 그렇게하지 않을 것이다.. 빨간색 상자가 어떻게 작동하는지 아래에서 확인하십시오. 오버플로 : 숨김.

4. "부유물"의 부모에게 일어나는 일?

부모는 "Float"아이들에 대해별로 신경 쓰지 않습니다. 단, 왼쪽 또는 오른쪽 경계 밖으로 나가면 안됩니다..

일반적으로 지정되지 않은 높이의 블록 요소는 자식 요소를 수용하기 위해 높이를 늘리지 만, "Float"자식의 경우는 그렇지 않습니다. "Float 's"크기가 증가하면 부모가 그에 따라 높이를 증가시키지 않습니다.. 이것은 다시 다음을 사용하여 해결할 수 있습니다. 오버플로 : 숨김 부모의.

5. "수레"를 치우는 법?

이미 사용에 대해 언급했습니다. 오버플로 : 숨김 "Float"다음에 다른 요소에 대한 적절한 공간을 만들고 형제가 줄 바꿈하는 것을 멈추기 위해 부모를 height-wise로 떠 다니는 자식을 수용하게하려면 "Floats.

이것이 요소를 타협없이 "플로트"근처에서 살게하는 방법입니다.

요소가 "Float"형제 근처에 있지 않은 또 다른 방법이 있습니다. 다음을 사용하여 명확한 속성을 사용하면 요소를 "플로트".

맑음 : 왼쪽; 맑음 : 오른쪽; 명확 : 둘 다; 

왼쪽 값은 요소의 왼쪽에있는 모든 "수레"를 지우고 그 반대의 경우도 마찬가지입니다. 권리, 그리고 양쪽에 양자 모두. 이 명확한 애트리뷰트는 형제, 빈 div 또는 의사 요소에서 편리하게 사용할 수 있습니다..

개요

1. 절대 / 고정 요소는 플로트되지 않습니다..
2. "플로트"가 요소 위에 오지 않습니다. 전에 코드에서.
3. 컨테이너에 공간이 충분하지 않으면 "Float"이 아래로 밀려납니다.
4. 모든 "플로트"는 블록 수준의 요소로 만들어집니다..
5. "Float"에 너비가 지정되어 있지 않으면 내용에 맞게 축소됩니다..
6. "Float"의 동급 형제는 그것들을 둘러싸고 (inline & text) 또는 그것들을 감싸줍니다 (blocks).
7. 요소가 "Float"을 래핑하지 못하도록하려면 다음을 사용합니다. 오버플로 : 숨김.
8. "Float"의 부모는 float에 맞게 높이를 높이 지 않습니다..
9. 부모가 "Float"당 높이를 높이려면 오버플로 : 숨김 (또는 다음과 함께 빈 형제를 만듭니다. 명확한 그 후)
10. 요소가 "플로트"근처에 있지 않도록하려면 명확한 속성.