플로팅 2 (또는 그 이상) div는 어떻게 작동합니까?

debugcn 에 게시 Dev

시각

내가 설정 한 경우 #p1에 float:left만 내용, #p2주위 랩 부동 #p1아닌 div#p2국지적는 div#p2내가 모두 설정 한 경우 (크롬 개발자 도구에서 볼 때)에만 브라우저 .However의 왼쪽 가장자리에서 존재하는 것 같다 된 div 에 float:left, 내용 등 용기가 서로를 감싸는 이유는 무엇입니까?

#p1 {
  background-color: blue;
  border: 1px solid black;
  float: left;
  width: 100px;
}
#p2 {
  background-color: red;
  border: 1px solid black;
  width: 100px;
  float: left;
}

<title>Floating Divs</title>
<h1>Floating Divs</h1>
<div>
  <div id="p1">DIV</div>
  <div id="p2">DIVDIVDIV</div>
</div>

#p1 {
  background-color: blue;
  border: 1px solid black;
  float: left;
  width: 100px;
}
#p2 {
  background-color: red;
  border: 1px solid black;
  width: 100px;
}

<title>Floating Divs</title>
<h1>Floating Divs</h1>
<div>
  <div id="p1">DIV</div>
  <div id="p2">DIVDIVDIV</div>
</div>

Alohci

수레에 대한 정확한 규칙은 2.1 사양 포인트 2라는 CSS에 설명 된대로 :

현재 상자가 왼쪽 부동이고 소스 문서의 앞부분에있는 요소에 의해 생성 된 왼쪽 부동 상자가있는 경우 이러한 이전 상자 각각에 대해 현재 상자의 왼쪽 바깥 쪽 가장자리가 오른쪽에 있어야합니다. 이전 상자의 외부 가장자리 또는 상단이 이전 상자의 하단보다 낮아야합니다. 오른쪽 부동 상자에도 유사한 규칙이 적용됩니다.

그래서 #p2그것이 떠있을 때 피할 것 #p1입니다. 플로팅되지 않으면의 존재를 무시합니다 #p1. 그러나에 포함 된 라인 상자 #p2는 floated 를 피하여의 #p1높이 #p2가 해당 라인 상자를 포함 할 수있을만큼 충분히 커지도록합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-8

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

플로팅 2 (또는 그 이상) div는 어떻게 작동합니까?

플로팅 2 (또는 그 이상) div는 어떻게 작동합니까?

Pandas 및 이산 축으로 hexbin을 어떻게 플로팅합니까? (또는 색상 기반 플로팅)

Linux 시스템에서 프로그램 또는 bash 쉘 명령이 정확히 어떻게 작동합니까?

Ubuntu 업그레이드 프로세스는 어떻게 작동합니까?

Ubuntu 업그레이드 프로세스는 어떻게 작동합니까?

프롤로그-이 영구 함수는 어떻게 작동합니까?

이 프로그램에서 fork () 함수는 어떻게 작동합니까?

apt-get 업그레이드는 실제로 어떻게 작동합니까?

로그 축이있는 기존 이미지 위에 어떻게 플로팅합니까?

python3 kubernetes 클라이언트에서 2 개 (또는 그 이상)의 다른 kubeconfig를로드하려면 어떻게해야합니까?

Jekyll 플러그인의 "priority"플래그는 어떻게 작동합니까?

프로그램이 실행되는 동안 새 변수 또는 개체를 어떻게 생성합니까? (C ++)

프로그램이 GTK 2 또는 3을 사용하는지 어떻게 알 수 있습니까?

plotly 또는 ggplot2에서 잔차 만 플로팅하려면 어떻게해야합니까?

R에서 ggplot 그래프의 오른쪽 상단 모서리에있는 phylopic의 이미지를 어떻게 플로팅합니까?

Linux의 디스플레이는 어떻게 작동합니까?

디스플레이 모드는 어떻게 작동합니까?

이 경우이 매크로는 어떻게 작동합니까?

struts2에서 <s : push> 태그는 어떻게 작동합니까?

동일한 그래프 ggplot에 두 개의 회귀 방정식 (또는 그 이상)을 플로팅합니다.

이 코드는 실제로 어떻게 작동합니까?

이 ActionResult 오버로드는 어떻게 작동합니까?

이 코드는 실제로 어떻게 작동합니까?

이 매크로는 어떻게 작동합니까?

이 프로그램에서 연산자 우선 순위는 실제로 어떻게 작동합니까?

Oracle Database를 사용하는 Java 프로그램이 다른 PC에서 어떻게 작동합니까?

I / O 스트림 플래그는 어떻게 작동합니까?

YUM 플러그인 yum-fastestmirror는 어떻게 작동합니까?

그루비 클로저는 내부적으로 어떻게 작동합니까?

이것은 버그입니까? 또는 2sxc ApiController를 어떻게 디버깅합니까?