플로팅 요소가 포함 된 컨테이너 요소의 높이가 증가하지 않는 이유는 무엇입니까?

높이와 플로트가 어떻게 작동하는지 묻고 싶습니다. 외부 div와 내용이있는 내부 div가 있습니다. 높이는 내부 div의 내용에 따라 다를 수 있지만 내 내부 div가 외부 div를 오버플로하는 것처럼 보입니다. 올바른 방법은 무엇입니까?

 <html>
    <body>
        <div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange">
    	    <div style="width:500px; height:200px; background-color:black; float:right"></div>
        </div>
    </body>
</html>



답변

부동 요소는 컨테이너 요소의 높이에 추가되지 않으므로 지우지 않으면 컨테이너 높이가 증가하지 않습니다 …

시각적으로 보여 드리겠습니다.

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오

자세한 설명 :

<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또는 rightwidth요소의는하지 않는 한이 보유하고있는 내용으로 제한됩니다 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, 또는 당신은 할 수 floatleft, 그리고 또 다른 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와를 할당 height50px아무것도 공상 그래서이. 플로팅 100%되지 않거나 할당하지 않는 한 수평 공간 을 차지하는 일반 비 플로팅 블록 레벨 요소입니다 inline-block.

에 대한 첫 번째 유효한 값 floatleft예제에서 사용 되므로 float: left;for 를 사용 .floated_left하므로 left컨테이너 요소의 블록을 플로팅하려고합니다 .

열이 왼쪽으로 뜹니다.

그리고 네, 보시면, .wrapper접힌 부모 요소 는 초록색 테두리로 보였을 때 확장되지 않았지만 맞습니까? 잠시 후에 다시 돌아올 것입니다. 지금은 열이에 뜹니다 left.

두 번째 열로 오면이 열 floatright

오른쪽에 또 다른 기둥이 뜬다

여기, 우리는이 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가로 메뉴 생성에 사용 – 데모

두 번째 요소도 플로팅하거나 여백을 사용하십시오.

마지막으로, 적어도, 나는 당신이 float하나의 요소만을 가지고 left있지만 그렇지 않은 이 특별한 경우를 설명하고 싶습니다.float 다른 어떻게됩니까?

우리가 제거하면 가정 float: right;우리의에서 .floated_right class의는 div극단적 인에서 렌더링되는 left이 떠되지 않는.

데모

그래서이 경우, 하나 할 수 있습니다 float하여에 left뿐만 아니라

또는

당신은 할 수 사용 margin-left즉 떠 왼쪽 칼럼의 크기와 동일 할 것이다 200px넓은 .


답변

overflow:auto내부 부동 div를 포함하려면 상위 div에 추가 해야합니다.

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

jsFiddle 예제


답변

플로트 버그가 발생했습니다 (이 동작을 나타내는 브라우저 수로 인해 기술적으로 버그인지 확실하지는 않습니다). 여기에 무슨 일이 일어나고 있습니까?

정상적인 상황에서 명시적인 높이가 설정되지 않았다고 가정하면 div와 같은 블록 레벨 요소는 내용에 따라 높이를 설정합니다. 상위 div의 하단은 마지막 요소를 넘어 확장됩니다. 불행히도, 요소를 플로팅하면 높이를 결정할 때 부모가 플로팅 된 요소를 고려하지 않습니다. 즉, 마지막 요소가 부동 상태이면 일반 요소와 같은 방식으로 부모를 “스트레칭”하지 않습니다.

청산

이 문제를 해결하는 두 가지 일반적인 방법이 있습니다. 첫 번째는 “clearing”요소를 추가하는 것입니다. 즉, 플로팅 된 요소 아래에있는 다른 요소는 부모를 강제로 늘립니다. 따라서 다음 html을 마지막 자식으로 추가하십시오.

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

표시되어서는 안되며 clear : both를 사용하여 부동 요소 옆에 있지 않고 그다음에 표시되도록하십시오.

과다:

대부분의 사람들이 선호하는 두 번째 방법은 부모 요소의 CSS를 변경하여 오버플로가 “보이는 것”이되도록하는 것입니다. 따라서 오버플로를 “숨겨 짐”으로 설정하면 부모가 플로팅 된 자식의 맨 아래로 확장됩니다. 물론 부모에 높이를 설정하지 않은 경우에만 해당됩니다.

내가 말했듯이, 두 번째 방법은 의미 론적으로 의미없는 요소를 마크 업에 추가 할 필요가 없기 때문에 선호되지만 overflow, 표시 해야 할 경우 가 있습니다.이 경우 지우기 요소를 추가하는 것이 허용되는 것 이상입니다 .


답변

그것은 div의 float 때문입니다. overflow: hidden외부 요소를 추가하십시오 .

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

데모


답변

플로팅 요소가있을 때 브라우저가 요소를 렌더링하는 방법을 혼동합니다. 하나의 블록 요소가 부동 인 경우 (귀하의 내부 div) 브라우저는 웹 페이지의 정상적인 흐름에서 부동 요소를 제거하기 때문에 다른 블록 요소는 무시합니다. 그런 다음 플로팅 된 div가 일반 흐름에서 제거되었으므로 내부 div가없는 것처럼 외부 div가 채워집니다. 그러나 인라인 요소 (이미지, 링크, 텍스트, 큰 따옴표)는 부동 요소의 경계를 존중합니다. 외부 div에 텍스트를 도입하면 텍스트가 내부 div에 배치됩니다.

즉, 블록 요소 (헤더, 단락, div 등)는 부동 요소를 무시하고 채우고 인라인 요소 (이미지, 링크, 텍스트 등)는 부동 요소의 경계를 존중합니다.

여기에 바이올린 예

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>


답변

이거 한번 해봐

.parent_div{
    display: flex;
}


답변

컨테이너 위에 표시 할 div가없는 경우 컨테이너 div에 overflow 속성을 사용할 수 있습니다.

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

다음은 CSS입니다.

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

———————–또는————————– —-

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

다음은 CSS입니다.

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }