컨테이너 요소에 부유 요소가 포함되어 있으면 높이가 증가하지 않는 이유는 무엇입니까?
높이와 플로트가 어떻게 작동하는지 묻고 싶습니다.저는 외부 디브와 그 안에 내용물이 있는 내부 디브를 가지고 있습니다.내디브의 내용에 따라 높이가 달라질 수 있지만 내디브는 외디브를 넘치게 될 것 같습니다.그것을 하는 적절한 방법은 무엇일까요?
<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요소요를플하는경우팅로소▁an▁if우▁you경▁element.
left또는right,width요소의 내용은 해당 요소가 보유하는 콘텐츠로 제한됩니다.width명시적으로 정의됨...은 다니없습.
float원소center이것은 제가 항상 초보자들과 함께 본 가장 큰 문제입니다. 사용하는 것은 유효한 값이 아닙니다.float소유물.float에 일반적으로 사용됩니다.float/내용을 맨 왼쪽 또는 맨 오른쪽으로 이동합니다.유효한 값은 4개뿐입니다.float즉 산재, 즉.left,right,none및 (기본값) »inherit., 부모 요소가 자식 할 때, 는 이를 사용합니다. 부동 하위 요소가 포함된 경우 이를 방지하기 위해 다음을 사용합니다.
clear: both;속성 - 양쪽의 부동 요소를 제거하여 상위 요소의 붕괴를 방지합니다.자세한 내용은 여기에서 제 다른 답변을 참조할 수 있습니다.(중요)다양한 요소들이 쌓여있는 곳을 생각해 보세요.사용할 때
float: left;또는float: right;요소가 스택 위로 하나씩 이동합니다.따라서 일반 문서 흐름의 요소는 일반 문서 흐름보다 높은 스택 수준에 있기 때문에 부동된 요소 뒤에 숨습니다. (완전히 다르므로 이와 관련하지 마십시오.)
예를 들어 CSS 플로트가 작동하는 방식을 설명하는 경우, 머리글, 바닥글 및 2열이 포함된 간단한 2열 레이아웃이 필요하다고 가정하면 다음과 같이 Blueprint가 표시됩니다.
예에서는 입니다. " 의예에서빨, " 우는만띄것다울니", "다입할있수니습당신이들자상간위리다▁in있,니▁boxes습▁you" 중 하나만 띄울 수 .float 다left아니면 할 수 있습니다.floatleft 또 는 리고또다것른그것▁to▁and.right3열, 3열이면 3열, 3열, 3열이면 .float ~ 2열 상left다른 것이 있는 곳에right따라서 이 예에서는 단순화된 2열 레이아웃을 가지고 있기 때문에 다음과 같습니다.float 대 1의 비율left 또 는 리고다하나는른그▁the는▁and.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;
}
이제 레이아웃을 단계별로 살펴보고 플로트가 어떻게 작동하는지 살펴보겠습니다.
먼저, 우리는 메인 래퍼 요소를 사용합니다. 당신은 그것이 당신의 뷰포트라고 가정할 수 있습니다. 그리고 나서 우리는 사용합니다.header 지합다니를 할당합니다.height50px그래서 그곳은 화려하지 않습니다.일반적인 비부동 블록 레벨 요소일 뿐입니다.100%합니다.inline-block 게하.
대첫음 유효값의 첫 번째 입니다.float이라left그래서 우리의 예에서, 우리는 사용합니다.float: left;위해서.floated_left그래서 우리는 블록을 띄울 계획입니다.left우리 컨테이너 요소의.
네,리고네, 보면요, 소부모, 즉시그, 즉,▁and, 부▁the요, ▁element,▁parent, ,모,, ▁you▁see소..wrapper붕괴되었습니다. 녹색 테두리가 있는 것은 확장되지 않았습니다. 하지만 확장되어야 합니다. 그렇죠?잠시 후에 다시 그 이야기로 돌아갈 것입니다, 현재, 우리는 칼럼을 띄웠습니다.left.
칸에 두번째열오면로,▁it면오,float은 …에게.right
기여, 우는리가 .300px가 리가쓰넓은하는 컬럼float에▁right첫 번째 기둥 옆에 앉을 것입니다.left고그것떠때기문다에니이그리▁the▁it▁to때▁since▁and문에'.left그것은 빈 홈통을 만들었습니다.right그리고 공간이 충분했기 때문에.right,우리들의right부유 요소는 완벽하게 옆에 앉았습니다.left 둘, 셋
여전히, 부모 요소는 붕괴되었습니다. 자, 이제 그것을 수정해 봅시다.상위 요소가 축소되는 것을 방지하는 방법은 여러 가지가 있습니다.
- 하여 사용합니다.
clear: both;원소들을 하고 있는 원소가 에, 은 요보소유고있하부전끝요에모나기소다가니부, ▁to▁▁before▁cheap▁one다▁a▁is▁ends,▁this▁element니▁now▁elements▁parent,입▁the해▁floated책결부에 대한 값싼 해결책입니다.clear당신을 위해 일을 할 당신의 부동 요소들, 하지만, 나는 이것을 사용하지 않는 것을 추천합니다.
더하다,<div style="clear: both;"></div> .wrapper div 예를 들어, .
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
은 잘 더 이상 가 무너지지는 에, 글요쎄, 에아부무, 더가모이, 은것상불, 그한요마, 떤제다니합안필크만그, 를기사하용사다어들은람추업니않을합지가그래서너요지는지져쳐고잘주것은,▁well▁use▁suggest▁to▁anymore제▁very▁unnecess에▁fixes다니합안,▁parent▁no글▁that,를사기▁so▁but▁the▁to▁dom하▁it▁some쎄용,▁collapsed어사▁addsoverflow: hidden;의도한 대로 작동하는 부동 하위 요소를 고정하는 상위 요소.
사용하다overflow: hidden;.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
로 할 를 절약해 줍니다.clear float하지만 제가 이것으로 다양한 사례를 테스트해보니, 그것은 하나의 특정한 사례에서 실패했습니다.box-shadow아동적 요소에 관하여.
데모(4면 모두 그림자가 보이지 않음,overflow: hidden;).
이제 어떻게 하죠?합니다. no " " " " , "overflow: hidden;hack으로 , CSS에 의 스니펫을 하고, 이 그니확에수해하고킹을, 아래스당 CSS을요세것, 고당사는처럼용하그신을 사용하는 처럼.overflow: hidden;상요소경우의, ▁the다,▁for라고 부릅니다.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뜨지 않았기 때문에.
OR
왼쪽 부동 열의 크기와 같은 크기, 즉 너비를 사용할 수 있습니다.
추가해야 .overflow:auto당신의 부모 디브에게 그것이 내부 유동 디브를 포함하도록 하기 위해:
<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>
float 버그가 발생하고 있습니다(비록 이러한 동작을 보이는 브라우저의 수 때문에 기술적으로 버그인지는 잘 모르겠습니다).다음과 같은 상황이 발생하고 있습니다.
일반적인 상황에서는 명시적인 높이가 설정되지 않았다고 가정할 때 div와 같은 블록 레벨 요소가 내용에 따라 높이를 설정합니다.상위 div의 하단은 마지막 요소를 넘어 확장됩니다.불행히도 요소를 부동시키면 부모가 높이를 결정할 때 부동 요소를 고려하지 않습니다.즉, 마지막 요소가 플로팅되는 경우 일반 요소와 동일한 방식으로 상위 요소를 "확장"하지 않습니다.
지우기
이 문제를 해결하는 일반적인 두 가지 방법이 있습니다.첫 번째는 "클리어링" 요소를 추가하는 것입니다. 즉, 부동 요소 아래에 부모가 늘어나도록 강제하는 또 다른 요소를 추가하는 것입니다.따라서 다음 html을 마지막 자식으로 추가합니다.
<div style="clear:both"></div>
이것은 보이지 않아야 합니다. 그리고 clear를 사용함으로써 둘 다 부유 요소 옆에 있지 않고 그 이후에 위치하도록 합니다.
오버플로:
대부분의 사람들이 선호하는 두 번째 방법은 부모 요소의 CSS를 변경하여 오버플로가 "보이는" 것이 아닌 다른 것이 되도록 하는 것입니다.따라서 오버플로를 "숨김"으로 설정하면 부모가 부유된 자식의 바닥을 벗어나도록 강제합니다.물론 부모의 키를 설정하지 않은 경우에만 해당됩니다.
은 앞서 요소를 앞서말이듯했, 두방마필의추크없에미요때가, 만째번은할가다있경하니습가우는필로당요기때이신, ▁the▁is▁to▁when▁가 필요할 때가 .overflow표시할 수 있습니다. 이 경우 클리어 요소를 추가하는 것이 허용 가능합니다.
그것은 div의 부유 때문입니다. 추가합니다.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 등)는 부동 요소를 무시하고 채우기를 수행하며 인라인 요소(이미지, 링크, 텍스트 등)는 부동 요소의 경계를 존중합니다.
<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에 오버플로 속성을 사용할 수 있습니다(예:
<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;
}
언급URL : https://stackoverflow.com/questions/16568272/why-doesnt-the-height-of-a-container-element-increase-if-it-contains-floated-el
'programing' 카테고리의 다른 글
| 여러 Github 프로젝트에 동일한 배포 키 사용 (0) | 2023.08.10 |
|---|---|
| 브라우저 탭에 포커스가 있는지 탐지 (0) | 2023.08.10 |
| 날짜 시간에서 하루가 아닌 1시간 빼기 (0) | 2023.08.10 |
| [App\Post]에서 대량 할당을 허용하도록 채우기 가능한 속성에 [제목] 추가 (0) | 2023.08.10 |
| Mysql : 데이터를 따라 데이터베이스 덤프 (0) | 2023.08.10 |