CSS 속성 float 학습 경험

전문 참고: http://www.linzenews.com/program/net/2331.html

한 번 살펴보겠습니다. CSS 속성 --float의 중요성.

다음 콘텐츠는 다음과 같은 하위 섹션으로 구분됩니다.

1: float 속성

2: float 속성의 특징

2.1: 플로트 텍스트 감싸기 효과

2.2: float의 아버지 요소가 크게 붕괴되었습니다.

3: 부유물 제거 방법

3.1: html 메소드

3.2: CSS 의사 요소 방법

4: 디스페이스 플로트

5: 블록 플로트 요소

6: 부동 유동 레이아웃

6.1: 한쪽 고정

6.2: DOM 및 디스플레이 위치가 다른 일방적 고정

6.3: 디스플레이와 동일한 위치에 DOM의 일방적 고정

6.4: 스마트 레이아웃


1: 부동 속성

Float는 이름 그대로 떠다닌다는 뜻입니다. 하지만 CSS에서는 float로 이해됩니다. float에는 네 가지 속성이 있습니다. 즉

1 float:none;
2 float:left;
3 float:right;
4 float:inherit;

가장 일반적으로 사용되는 두 가지 속성 값은 왼쪽 부동과 오른쪽 부동입니다. 다음 공유에서는 왼쪽 플로팅만 예로 사용하겠습니다. 그 외 플로팅 속성값의 원리는 왼쪽 플로팅의 원리와 동일합니다.

2: float 속성의 특징

　2.1: float의 텍스트 감싸기 효과

Floating의 원래 의도는 텍스트 감싸기 효과입니다.

다음 코드와 데모를 살펴보세요.

1 <div class="container">
2     <div class="content"></div>
3     <p>
4 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
5         </p>
6     </div>    

 1 .container {
 2   width: 300px;
 3   height: 300px;
 4   border: 1px solid black;
 5 }
 6 .container .content {
 7   float: left;
 8   width: 150px;
 9   height: 150px;
10   background-color: lightpink;
11   margin: 5px;
12 }

content 요소는 왼쪽 부동으로 설정되어 div 요소가 문서 흐름에서 분리되고 텍스트가 그 주위에 표시됩니다.

　2.2: float의 아버지 요소가 크게 붕괴되었습니다

div 요소를 예로 들어보겠습니다. div 요소의 높이는 콘텐츠에 따라 자동으로 확장됩니다. 즉, 내용만큼 높이도 높다는 뜻이다. 그러나 내부 요소에 float 속성이 설정되면 상위 요소의 높이가 축소됩니다. 코드와 예제는 다음과 같습니다.

1 <div class="container">
2     <p>
3 Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4     </p>
5 </div>

아래와 같이 접힌 후 CSS와 데모가 나옵니다.

1 .container {
2   width: 300px;
3   border: 1px solid black;
4 }
5 .container p {
6   float: left;
7 }

하위 요소가 부동으로 설정되기 전후에 발생한 변경 사항을 확인할 수 있습니다.

3: 부유물 제거 방법

그럼 문제는 내부 요소가 플로팅되는 경우 상위 요소의 높이 붕괴를 방지하는 방법입니다.

부모 요소에 높이를 직접 설정하면 충분하지 않을까?라고 생각하는 학생들도 있을 것입니다. 실제로는 불가능합니다. 왜냐하면 상위 요소의 높이가 고정되어 있으면 나중에 콘텐츠를 추가하려면 CSS 코드를 수정해야 하는데, 이는 매우 번거로운 작업입니다.
부모 요소의 높이 붕괴 문제를 해결하는 방법에는 두 가지가 있습니다.
　3.1: 상위 요소의 하단에 빈 div를 추가한 다음, clear:both 속성을 ​​추가합니다.

코드는 다음과 같습니다.

1         <div class="container">
2             <p>
3             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4             </p>
5             <div class="clearfix"></div>
6         </div>

 1 .container {
 2   width: 300px;
 3   border: 1px solid black;
 4 }
 5 .container p {
 6   float: left;
 7 }
 8 .container .clearfix {
 9   overflow: hidden;
10   *zoom: 1;
11 }

　3.2: 상위 요소는 이후에 의사 클래스를 설정합니다.

1         <div class="container">
2             <p>
3             Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
4             </p>
5         </div>

 1 .container {
 2   width: 300px;
 3   border: 1px solid black;
 4   *zoom: 1;
 5 }
 6 .container p {
 7   float: left;
 8 }
 9 .container:after {
10   content: "";
11   display: table;
12   clear: both;
13 }

4: De-space float 요소

은 무슨 뜻인가요? 일상적인 코딩에서는 HTML 코딩 표준을 준수하기 위해 html 태그에 들여쓰기를 추가하여 아름다운 효과를 얻습니다. 그러나 들여쓰기를 하면 공백이 발생하게 되는데, 즉  입니다. 요소에 왼쪽 부동을 설정하면 요소 자체가 왼쪽으로 부동하고 나머지 공백은 끝까지 압축됩니다. 이것이 위에서 언급한 텍스트 줄바꿈 효과입니다. 그러나   Enter 키를 누르는 것과 효과가 약간 다르다는 점에 유의하세요.

5: 블록 플로트 요소

인라인 요소에 플로팅 속성을 설정한 후 표시 속성이 인라인에서 블록으로 변경됩니다. 또한 인라인 요소의 너비와 높이를 설정할 수 있습니다. float 및 width 속성을 사용하여 몇 가지 간단한 고정 너비 레이아웃 효과를 얻을 수 있습니다.

6: 부동 유동 레이아웃

6.1: 한쪽은 고정되고 오른쪽은 적응형 레이아웃입니다.

1         <div class="container">
2             <div class="left">左浮动+固定宽度</div>
3             <div class="right">右边自适应宽度+margin-left</div>
4         </div>

 1 .container{
 2     max-width:90%;
 3     margin:0 auto;
 4 }
 5 
 6 .left{
 7     float:left;
 8     text-align:center;
 9     background-color: lightpink;
10     width: 200px;
11     height:300px;
12 }
13 
14 .right{
15     background-color: lightyellow;
16     margin-left:200px;
17     height:300px;
18     padding-left:10px;
19 }

　6.2: DOM과 디스플레이 위치가 다른 일방적 고정

1         <div class="container">
2             <div class="right">右浮动+固定宽度</div>
3             <div class="left">左边自适应宽度+margin-right</div>
4         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .right {
 6   float: right;
 7   width: 200px;
 8   height: 200px;
 9   background-color: lightpink;
10 }
11 .container .left {
12   background-color: lightyellow;
13   margin-right: 200px;
14   height: 300px;
15   padding-left: 10px;
16 }

즉, html 요소가 페이지에 표시되는 요소와 동일한 위치에 있지 않습니다.

　　6.3: DOM과 디스플레이 위치를 같은 위치에 일방적으로 고정

1         <div class="container">
2             <div class="left-content">
3                 <!-- 左浮动+width100% -->
4                 <div class="left">margin-right</div>
5             </div>
6             <div class="right">左浮动+固定宽度+margin-left负值</div>
7         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .right {
 6   float: left;
 7   width: 200px;
 8   height: 200px;
 9   background-color: lightpink;
10   margin-left: -200px;
11   height: 300px;
12 }
13 .container .left {
14   background-color: lightyellow;
15   margin-right: 200px;
16   height: 300px;
17   text-align: center;
18 }

　6.4: 스마트 레이아웃

소위 스마트 레이아웃이란 두 열의 너비를 설정할 필요가 없으며 너비가 콘텐츠에 맞춰 조정된다는 의미입니다.

 1         <div class="container">
 2             <div class="left">
 3                 float+margin-right+自适应宽度
 4             </div>
 5             <div class="right">
 6                 display:table-cell  ---IE8+;
 7                 display:inline-block   ---IE7+;
 8                 自适应宽度
 9             </div>
10         </div>

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .left {
 6   float: left;
 7   height: 300px;
 8   background-color: lightpink;
 9 }
10 .container .right {
11   display: table-cell;
12   *display: inline-block;
13   height: 300px;
14   background-color: lightyellow;
15 }

 1 .container {
 2   max-width: 90%;
 3   margin: 0 auto;
 4 }
 5 .container .left {
 6   float: left;
 7   height: 300px;
 8   background-color: lightpink;
 9 }
10 .container .right {
11   display: table-cell;
12   *display: inline-block;
13   height: 300px;
14   background-color: lightyellow;
15 }

요약은 다음과 같습니다.

1: 요소가 float 속성을 설정하면 요소가 뭉툭해집니다.

2: float 속성은 원래 텍스트 감싸기 효과를 위해 생성되었습니다.

3: float 요소는 상위 요소의 높이를 축소합니다.

4: 플로트 요소는 줄 바꿈으로 인한 공백을 제거합니다.

5: float를 사용하여 2열 적응형 레이아웃을 구현합니다.