부모 요소와 하위 요소에 각각flat를 시도해 보다

의 목적

부모 요소와 아이 요소를 몸으로 기억하는flat의 사용법

사용한 파일

sample.html

sample.css

sample.html

<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
  <div class="red">親
    <div class="green">子</div>
  </div>
    <div class="blue">他人</div>
  </body>
</html>

sample.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.red {
  background-color: red;
  height: 200px;
  width: 200px;
}

.green {
  background-color: green;
  height: 100px;
  width: 100px;
}

.blue {
  background-color: blue;
  height: 150px;
  width: 150px;
}

sample.브라우저에 > 표시

애한테 플랫 씌워봐.
sample.css

.green {
  background-color: green;
  height: 100px;
  width: 100px;
  float: right;
}

그리고 나서

부모의 범위 내에서 떠돌다
이어서 아이의 플래트를 삭제하고 부모(red)에게 플래트를 걸어보세요.
sample.css

.red {
  background-color: red;
  height: 200px;
  width: 200px;
  float: right;
}

그리고 나서

부모 요소에flat만 덧붙이면 자요소가flat된다

결론

만약 부요소에 대해 부유를 진행한다면, 자요소도 함께 부유할 것이다
하위 요소로 부동하면 부모 요소 범위 내에서 부동

Reference

이 문제에 관하여(부모 요소와 하위 요소에 각각flat를 시도해 보다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/RyOza/items/a99060ca9b70bf687bed

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다