274

당신이이 말 div그것을 명확한주고, width내 경우에, 그 안에 넣어 요소를 img다른 div.

콘테이너의 내용물은 div콘테이너 div가 늘어나고 내용의 배경이 될 것이라는 아이디어입니다 . 그러나이 작업을 수행 div하면 비 부동 객체에 맞게 포함이 축소되고 부동 객체가 완전히 또는 절반으로 절반으로 줄어들어 큰 크기와 관련이 없습니다 div.

왜 이런거야? 내가 부족 뭔가가, 그리고 내가 어떻게 스트레칭 할 항목 떠 얻을 수있는 height포함하는의를 div?

css html css-float

— DavidR
소스

397

가장 쉬운 방법은 overflow:hidden부모 div 를 놓고 높이를 지정하지 않는 것입니다.

#parent { overflow: hidden }

또 다른 방법은 부모 div를 플로팅하는 것입니다.

#parent { float: left; width: 100% }

다른 방법은 명확한 요소를 사용합니다.

<div class="parent">
   <img class="floated_child" src="..." />
   <span class="clear"></span>
</div>

CSS

span.clear { clear: left; display: block; }

— 더그 니 니어
소스

17

그것은 효과가 있지만 지금은 두 배 혼란 스럽습니다 : 이것에 대한 설명이 있습니까? 아니면 어떻게됩니까?

— DavidR

8

네, 설명하지만 난 이후 잊어 버린 그것을 :( 그것의 단지 어떻게입니다. overflow:hidden힘이 할 수있는 최선은 부모의 자식 요소를 포함 할 수있는 브라우저 그게 전부는 그것을 수정하는 이유..

— 더그 Neiner

5

나는 설명을 overflow: hidden여기에 있다고 생각한다 : link . 그리고 고마워요, 그것은 나를 위해 일했다

— Vikas Arora

6

@DavidR 가장 쉬운 설명은 html / css가 구식이며, 잘 모르고, 제대로 구현되지 않은 기술이라는 것입니다. 실제로,이 추론은 실제로이 게시물을 만든 이후로 의심 할 여지없이 많은 html / css 단점을 설명합니다.

— 약간

1

명심 overflow: hidden바로 부모 컨테이너의 흘러 요소의 어떤 부분을 숨 깁니다. 나에게 이것은 특정 비트의 텍스트를 읽을 수 없게 만들었습니다.

— 톱 고양이

160

이유

문제는 플로팅 요소가 유출되는 것입니다 .

플로팅, 절대 위치 또는 루트 요소 인 경우 요소가 플로우에서 호출 됩니다 .

따라서 유입 요소와 마찬가지로 주변 요소에 영향을 미치지 않습니다 .

이것은 9.5 수레에 설명되어 있습니다 :

플로트가 흐름에 없기 때문에 플로트 상자 전후에 생성 된 배치되지 않은 블록 상자는 플로트가없는 것처럼 수직으로 흐릅니다. 그러나 플로트 옆에 생성 된 현재 및 후속 라인 상자는 플로트의 여백 상자를위한 공간을 만들기 위해 필요한만큼 줄어 듭니다.

코드 스 니펫 표시

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling:after {
  content: 'Block sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="float"></div>
<div class="block-sibling">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.
</div>

스 니펫 확장

10.6 높이 및 여백 계산 에도 지정되어 있습니다. 들어 "정상"블록 ,

정상적인 흐름의 어린이 만 고려됩니다 (즉, 부동 상자 및 절대 위치 상자는 무시됩니다 […]).

코드 스 니펫 표시

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 130px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

스 니펫 확장

해키 솔루션 : 정리

문제를 해결하는 방법은 일부 유입 요소를 모든 플로트 아래에 배치하는 것입니다. 그런 다음 부모의 높이가 커져 해당 요소를 래핑합니다 (따라서 수레도).

이것은 속성을 사용 하여clear 얻을 수 있습니다 :

이 속성은 요소 상자의 어느 쪽이 이전의 부동 상자에 인접 하지 않을 수 있는지 나타냅니다 .

코드 스 니펫 표시

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent:after {
  content: 'Block parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 84px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.clear {
  clear: both;
  text-align: center;
  height: 37px;
  border: 3px dashed pink;
}
.clear:after {
  position: static;
  content: 'Block sibling with clearance';
  color: pink;
}

<div class="block-parent">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra.
  <div class="clear"></div>
</div>

스 니펫 확장

따라서 솔루션은 clear: both플로트의 마지막 형제로 빈 요소를 추가합니다.

<div style="clear: both"></div>

그러나 이는 의미론이 아닙니다. 따라서 부모의 끝에 의사 요소 를 더 잘 생성하십시오 .

.clearfix::after {
  clear: both;
  display: block;
}

이 방법에는 여러 가지 변형이 있습니다 (예 : 더 이상 사용되지 않는 단일 콜론 구문 :after을 사용하여 이전 브라우저 지원 또는 과 같은 다른 블록 수준 디스플레이 사용) display: table.

솔루션 : BFC 루트

처음에 정의 된 문제가있는 동작에는 예외가 있습니다. 블록 요소가 블록 서식 컨텍스트를 설정하면 (BFC 루트) 플로팅 내용도 래핑됩니다.

블록 서식 컨텍스트 루트에 대한 10.6.7 '자동'높이에 따르면 ,

요소에 아래쪽 여백 가장자리가 요소의 아래쪽 내용 가장자리 아래에있는 부동 자손이있는 경우 해당 가장자리를 포함하도록 높이가 증가합니다.

코드 스 니펫 표시

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-parent {
  border: 3px solid blue;
}
.block-parent.bfc-root:after {
  content: 'BFC parent';
  color: blue;
}
.float {
  float: left;
  border: 3px solid red;
  height: 127px;
  width: 150px;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="block-parent bfc-root">
  <div class="float"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
</div>

스 니펫 확장

또한 9.5 Floats에 설명 된 것처럼 BFC 루트는 다음 때문에 유용합니다.

테이블의 경계 상자, 블록 레벨 대체 요소 또는 새 블록 형식화 컨텍스트를 설정하는 일반 플로우의 요소 […]는 요소 자체와 동일한 블록 형식화 컨텍스트에서 부동 소수점 여백 상자와 겹치지 않아야합니다. .

코드 스 니펫 표시

html {
  width: 550px;
  border: 1px solid;
}
body {
  font-family: sans-serif;
  color: rgba(0,0,0,.15);
}
body:after {
  content: '';
  display: block;
  clear: both;
}
div {
  position: relative;
}
div:after {
  font-size: 200%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  text-align: center;
}
.block-sibling {
  border: 3px solid green;
}
.block-sibling.bfc-root:after {
  content: 'BFC sibling';
  color: green;
}
.float {
  float: left;
  border: 3px solid red;
  height: 90px;
  width: 150px;
  z-index: 1;
}
.float:after {
  content: 'Float';
  color: red;
}
.bfc-root {
  overflow: hidden;
}

<div class="float"></div>
<div class="block-sibling bfc-root">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</div>

스 니펫 확장

블록 서식 컨텍스트는

overflow이외의 블록 박스 visible, 예.hidden

.bfc-root {
  overflow: hidden;
  /* display: block; */
}

때 상자를 차단하지 않는 블록 컨테이너 display로 설정 inline-block, table-cell또는 table-caption.
```
.bfc-root {
  display: inline-block;
}
```
요소 부동 다음과 같은 경우 float로 설정 left하거나 right.
```
.bfc-root {
  float: left;
}
```
절대로 배치 된 요소 : when 또는 position로 설정되어 있습니다.absolutefixed
```
.bfc-root {
  position: absolute;
}
```

오버플로 내용 내용 클리핑, 맞춤 알고리즘으로 자동 너비 계산 또는 흐름에서 벗어나는 등 원하지 않는 부수 효과가있을 수 있습니다 . 따라서 문제는 BFC를 설정하는 오버플로가 보이는 인플 로우 블록 레벨 요소를 가질 수 없다는 것입니다.

디스플레이 L3 은 다음과 같은 문제를 해결합니다.

생성 flow및 내부 디스플레이 유형을 잘 표현 흐름 레이아웃에 표시 유형 및 요소 메이킹에 대한 명시적인 스위치를 만들 BFC의 루트를. (이 같은 해킹에 대한 필요성 제거해야 및 [...])flow-root ::after { clear: both; }overflow: hidden

안타깝게도 아직 브라우저 지원이 없습니다. 결국 우리는 사용할 수 있습니다

.bfc-root {
  display: flow-root;
}

— 오리올
소스

1

따라서 부유 상자는 부모 컨테이너에 의해 인식되지 않으므로 높이가 붕괴되지만 형제에 의해 인식되므로 명확한 것입니까?

— symlink

@symlink 예, 부모 컨테이너는 BFC 루트가 아니라면 플로트를 둘러싸 기 위해 자라지 않습니다. BFC 루트가 아닌 형제는 블록의 직접적인 영향을받지 않습니다 (그러나 라인 박스는 영향을받습니다). 그러나 클리어런스는 이전 플로트 아래로 이동합니다.

— Oriol

"BFC 루트가 아닌 형제는 블록의 직접적인 영향을받지 않습니다 (그러나 라인 박스는 영향을받습니다)." -이것을 명확히 해줄 수 있습니까? 이 jsFiddle : jsfiddle.net/aggL3Lk7/2 에서 플로팅 인라인 이미지는 스팬에 영향을 미치지 않지만 스팬의 테두리가 스팬에 영향을 미치지 않지만 이미지는 표시된 것처럼 텍스트 (라인 상자)에 영향을 미칩니다. 텍스트가 이미지에 겹치지 않는다는 사실에 의해?

— symlink

1

@symlink 그렇습니다. 글쎄, 당신의 바이올린에서 테두리는 부모에 속하지만, 기본적으로 형제 에게는

— Oriol

1

동의합니다. 이것은 정답입니다. W3가 우리가 "해킹"을 코딩하도록 강요하는 방식을 부르고 있다는 것이 흥미 롭습니다. 누군가가 망 쳤어

— DR01D

20

부동 소수점 div(s)을 divCSS 에 넣으면 overflow:hidden;
정상적으로 작동합니다.

— 나드
소스

나는 그것을 시도했지만 문제를 해결하지 못했습니다 : stackoverflow.com/questions/25329349/…

— SearchForKnowledge

15

W3 학교 추천 :

overflow: auto부모 요소에 놓으면 요소 여백을 포함하여 전체 배경에 "색이 지정됩니다". 또한 플로팅 요소는 테두리 안에 유지됩니다.

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix

— mggluscevic
소스

11

빠진 것이 없습니다. Float는 이미지 (예 :)가 텍스트의 여러 단락 옆에 놓 이도록하려는 경우를 위해 설계되었으므로 텍스트가 이미지 주위로 흐릅니다. 텍스트가 컨테이너를 "스트레치"한 경우에는 발생하지 않습니다. 첫 번째 단락이 끝나면 다음 단락이 이미지 아래에서 시작됩니다 (아마도 수백 픽셀 아래).

이것이 바로 결과를 얻는 이유입니다.

— 루카스 윌슨-리히
소스

3

부동 요소가 부모의 높이를 올바르게 늘리는 것과 어떻게 관련이 있습니까?

— 약간

11

경우에 따라 (예 를 들어, 동일한 "라인"에 요소가 흐르기 위해 사용 하는 경우)float

display: inline-block;

대신에

float: left;

그렇지 않으면 clearCSS 작업을 수행하기 위해 요소를 필요로하는 요소가 필요하기 때문에 최종 요소를 사용하면 효과가 있습니다.

— LSerni
소스

11

보다 현대적인 접근 방식은 다음과 같습니다.

.parent {display: flow-root;}

더 이상 명확한 수정 사항이 없습니다.

오버플로 사용 : 숨겨진; 상자 그림자를 숨 깁니다.

— 보류중인 폭스
소스

Safari 11에서도 작동

— pendingfox

7

LSerni 당신이 나를 위해 그것을 해결 감사합니다 .

이것을 달성하려면 :

+-----------------------------------------+
| +-------+                     +-------+ |
| | Text1 |                     | Text1 | |
| +-------+                     +-------+ |
|+----------------------------------------+

이 작업을 수행해야합니다.

<div style="overflow:auto">
    <div style="display:inline-block;float:left"> Text1 </div>
    <div style="display:inline-block;float:right"> Text2 </div>
</div>

— 플라이 아웃 91
소스

4

Lucas가 말했듯이 설명하는 것은 float 속성의 의도 된 동작입니다. 많은 사람들이 혼란스럽게 생각하는 것은 float가 CSS 레이아웃 모델의 단점을 보완하기 위해 원래 의도 된 사용법을 훨씬 뛰어 넘었다는 것입니다.

이 속성이 어떻게 작동하는지 더 잘 이해하려면 Floatutorial을 살펴보십시오 .

— 샘 머레이 서턴
소스

0

먼저 쉽게 할 수 있습니다 .div를 유연하게 만들고 내용을 오른쪽 또는 왼쪽으로 정당화하면 문제가 해결됩니다.

<div style="display: flex;padding-bottom: 8px;justify-content: flex-end;">
					<button style="font-weight: bold;outline: none;background-color: #2764ff;border-radius: 3px;margin-left: 12px;border: none;padding: 3px 6px;color: white;text-align: center;font-family: 'Open Sans', sans-serif;text-decoration: none;margin-right: 14px;">Sense</button>
				</div>

스 니펫 확장

— 비제이 티 와리
소스

div 내에 떠있는 요소는 div 외부에 떠 있습니다. 왜?

이유

해키 솔루션 : 정리

솔루션 : BFC 루트