CSS에서 플랫 플로팅이 발생하는 원인과 문제점 분석-CSS 튜토리얼-php.cn

CSS에서 플랫 플로팅이 발생하는 원인과 문제점 분석

不言

풀어 주다： 2018-08-30 11:12:11

원래의

1845명이 탐색했습니다.

이 글의 내용은 CSS에 떠다니는 플러터의 원인과 그것이 가져오는 문제에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

플롯 플로팅의 원인과 부작용

플로트의 4개 매개변수

왼쪽, 오른쪽, 없음, 상속

#🎜🎜 #float 플로팅 이유

float를 사용하면 요소가 표준 문서 흐름에서 벗어나게 됩니다. (표준 문서 흐름은 블록 요소, 라인 요소 등 다양한 요소 유형을 각각의 특성에 맞게 배열하여 표시하는 것입니다. 속성은 다르지만 모두 위에서 아래, 왼쪽에서 오른쪽의 순서로 배열됩니다.) # 🎜 🎜#

float 플로팅의 부작용

#🎜🎜 ## 🎜🎜#

<style type="text/css">
    .box{
          border: 4px solid #000000;      
          width: 200px;      
          height: 200px;      
          display: inline-block;    
          }
    .itemSmall_1{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          /* float: left; */
    }
    .itemSmall_2{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          float: left;    
          }
    .itemBig{
          background-color: blue;      
          width: 150px;      
          height: 150px;      
          border: 2px solid #000000;    
          }
  </style><body>
    <div class="box">
      <div class="itemSmall_1">

      </div>
      <div class="itemBig">

      </div>
    </div>
    <div class="box">
      <div class="itemSmall_2">

      </div>
      <div class="itemBig">

      </div>
    </div>
  </body>

로그인 후 복사

*블록 요소와 인라인 요소. 텍스트와 같은 인라인 요소는 부동 요소 주위에 떠 있으며 부동 요소를 위한 공간을 남겨둡니다.

<style type="text/css">
    .box{
          border: 4px solid #000000;      
          width: 200px;      
          height: 200px;      
          display: inline-block;      
          vertical-align: top;    
          }
    .itemSmall_1{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          /* float: left; */
    }
    .itemSmall_2{
          background-color: chartreuse;      
          width: 40px;      
          height: 40px;      
          border: 2px solid #000000;      
          float: left;    
          }
    .itemBig{
          background-color: blue;      
          width: 150px;      
          height: 150px;      
          border: 2px solid #000000;    
          }
  </style>
  <body>
    <div class="box">
      <div class="itemSmall_1">
      </div>
      <div class="itemBig">
      </div>
    </div>

    <div class="box">
      <div class="itemSmall_2">
      </div>
      行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素    </div>
  </body>

로그인 후 복사

*두 개의 블록 수준 요소가 부동하고 상위 요소는 접힙니다.
CSS에서 플랫 플로팅이 발생하는 원인과 문제점 분석

<style type="text/css">
    .box{
          border: 4px solid #000000;      
          float: left;    
          }

    .itemSmall_2{
          background-color: chartreuse;      
          width: 40px;     
          height: 40px;      
          border: 2px solid #000000;      
          float: left;    
          }  
     .itemBig2{
           background-color: blue;      
           width: 150px;      
           height: 150px;      
           border: 2px solid #000000;      
           float: left;    
           }
  </style>
  <body>
    <div class="box">
      <div class="itemSmall_2">
      </div>
      <div class="itemBig2">
      </div>
    </div>
  </body>

로그인 후 복사

관련 권장 사항:
CSS에서 플랫 플로팅이 발생하는 원인과 문제점 분석