부동 요소는 컨테이너 요소의 높이에 추가되지 않으므로 지우지 않으면 컨테이너 높이가 증가하지 않습니다 ...
시각적으로 보여 드리겠습니다.
자세한 설명 :
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
overflow: hidden;컨테이너 요소를 추가 할 수도 있지만 clear: both;대신 사용 하는 것이 좋습니다 .
또한 요소를 스스로 지우고 싶다면 사용할 수 있습니다.
.self_clear:after {
content: "";
clear: both;
display: table;
}
CSS 플로트는 어떻게 작동합니까?
float는 정확히 무엇이고 무엇을합니까?
float속성은 대부분의 초보자 오해한다. 글쎄, 정확히 무엇을 float합니까? 처음에는 float속성이 떠내려 이미지 주위에 텍스트 흐름을 도입 left또는 right. @Madara Uchicha 의 또 다른 설명 이 있습니다.
따라서 float상자를 나란히 배치 하는 데 속성 을 사용하는 것이 잘못 되었습니까? 대답은 아니요입니다 . float상자를 나란히 설정하기 위해 속성 을 사용하면 아무런 문제가 없습니다 .
inline또는 block레벨 요소를 플로팅하면 요소가 요소처럼 동작합니다 inline-block.
데모당신이 요소를 떠 경우 left또는 right의 width요소의는하지 않는 한이 보유하고있는 내용으로 제한됩니다 width명시 적으로 정의된다 ...
float요소를 사용할 수 없습니다 center. 이것은 내가 초보자에게 항상 봤던 가장 큰 문제 입니다. float: center;float속성 은 유효한 값이 아닙니다 . float일반적으로 float컨텐츠를 맨 왼쪽 이나 맨 오른쪽으로 이동 하는 데 사용됩니다 . 단지가 있습니다 사 에 대한 유효한 값 float속성 즉 left, right, none(기본) 및이 inherit.
플로팅 된 자식 요소를 포함 할 때 부모 요소가 축소되면이를 방지하기 위해 clear: both;속성 을 사용 하여 양쪽에서 플로팅 된 요소를 지우면 부모 요소가 접히지 않습니다 . 자세한 내용은 여기에서 다른 답변을 참조 하십시오 .
(중요) 다양한 요소가 쌓여있는 곳을 생각해보십시오. 우리가 사용할 때 float: left;또는 float: right;요소가 스택 위로 하나씩 움직입니다. 따라서 일반 문서 플로우의 요소는 부동 요소보다 스택 레벨에 있으므로 부동 요소 뒤에 숨겨집니다. ( z-index완전히 다르기 때문에 이것을 관련시키지 마십시오 .)
헤더, 바닥 글 및 2 개의 열이있는 간단한 2 열 레이아웃이 필요하다고 가정하고 CSS 부동 소수점 작동 방식을 설명하는 사례를 예로 들어, 여기에 청사진이 표시됩니다.
위의 예에서, 우리는 단지 빨간색 상자를 떠 중 하나를 수행 할 수 있습니다 것 float모두에 left, 또는 당신은 할 수 float에 left, 그리고 또 다른 right는 3 열을의 경우 수도, 레이아웃에 따라 달라 아니라 float2 열 left경우 다른 right이 예제에서는 단순화 된 2 열 레이아웃이 있으므로 float하나 left와 다른 하나 는 서로 의존 합니다 right.
레이아웃을 만들기위한 마크 업과 스타일에 대해서는 아래에서 자세히 설명합니다 ...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
레이아웃을 단계별로 살펴보고 float 작동 방식을 살펴 보겠습니다.
우선, 우리는 주요 래퍼 요소를 사용하여, 당신은 단지 우리가 사용, 그것은 당신의 뷰포트 있다고 가정 할 수 header와를 할당 height의 50px아무것도 공상 그래서이. 플로팅 100%되지 않거나 할당하지 않는 한 수평 공간 을 차지하는 일반 비 플로팅 블록 레벨 요소입니다 inline-block.
에 대한 첫 번째 유효한 값 float은 left예제에서 사용 되므로 float: left;for 를 사용 .floated_left하므로 left컨테이너 요소의 블록을 플로팅하려고합니다 .
열이 왼쪽으로 뜹니다.
그리고 네, 보시면, .wrapper접힌 부모 요소 는 초록색 테두리로 보였을 때 확장되지 않았지만 맞습니까? 잠시 후에 다시 돌아올 것입니다. 지금은 열이에 뜹니다 left.
두 번째 열로 오면이 열 float을right
오른쪽에 또 다른 기둥이 뜬다
여기, 우리는이 300px우리 넓은 열 float받는 right것이가에 떴다됩니다으로 첫 번째 열 옆에 앉아 것 left, 그리고이에 떠이기 때문에 left, 그것은에 빈 거터를 생성 right하고, 공간의 충분한 거기 때문에 right, 우리의 right떠 다니는 요소가 옆에 완벽하게 앉았습니다 left.
여전히 상위 요소가 축소되었습니다. 이제 수정 해 보겠습니다. 부모 요소가 쓰러지는 것을 막는 방법에는 여러 가지가 있습니다.
- 빈 블록 레벨 요소를 추가하고 부동 요소를
clear: both;보유하는 상위 요소가 끝나기 전에 사용 하십시오.이 요소는 clear부동 요소에 대한 저렴한 솔루션이므로 작업을 수행하지만 권장하지는 않습니다.
끝 <div style="clear: both;"></div>전에 다음 .wrapper div과 같이 추가하십시오.
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
데모
글쎄, 그것은 더 잘 수정되고 더 이상 축소 된 부모는 없지만 DOM에 불필요한 마크 업을 추가하므로 overflow: hidden;의도 된대로 작동하는 부동 자식 요소를 보유하는 부모 요소에 사용 하는 것이 좋습니다 .
사용 overflow: hidden;에.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
데모
그것은 우리가 필요할 때마다 요소를 저장 clear float하지만 이것으로 다양한 사례를 테스트 할 box-shadow때 자식 요소 를 사용하는 특정 사례에서 실패했습니다 .
데모 (4면 모두에서 그림자를 볼 수overflow: hidden; 문제가 발생합니다)
그래서 지금 무엇? 요소를 저장하지 overflow: hidden;마십시오. 명확한 수정 해킹을 위해 CSS에서 아래 스 니펫을 사용 overflow: hidden;하십시오. 상위 요소 와 마찬가지로 부모 요소에서 class아래를 호출하여 자체 정리하십시오.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
데모
여기서 그림자는 의도 한대로 작동하며 축소되지 않도록 부모 요소를 자체적으로 지 웁니다.
마지막으로 clear플로팅 요소 뒤에 바닥 글을 사용 합니다.
데모
언제 float: none;가 기본이기 때문에, 어쨌든 사용 선언에 대한 사용하므로float: none; ?
반응 형 디자인을 원한다면 플로팅 된 요소가 특정 해상도에서 다른 요소 아래로 렌더링되도록 할 때이 값을 여러 번 사용합니다. 그 float: none;속성에있어 중요한 역할을합니다.
float유용한 방법에 대한 실제 사례는 거의 없습니다 .
- 우리가 이미 본 첫 번째 예는 하나 이상의 열 레이아웃을 만드는 것입니다.
img내부에 플로트를 사용하면 p콘텐츠가 흐를 수 있습니다.
데모 (플로팅img제외)
데모 2 (에img뜬다left)
두 번째 요소도 플로팅하거나 여백을 사용하십시오.
마지막으로, 적어도, 나는 당신이 float하나의 요소만을 가지고 left있지만 그렇지 않은 이 특별한 경우를 설명하고 싶습니다.float 다른 어떻게됩니까?
우리가 제거하면 가정 float: right;우리의에서 .floated_right class의는 div극단적 인에서 렌더링되는 left이 떠되지 않는.
데모
그래서이 경우, 하나 할 수 있습니다 float하여에 left뿐만 아니라
또는
당신은 할 수 사용 margin-left즉 떠 왼쪽 칼럼의 크기와 동일 할 것이다 200px넓은 .