일반적으로 사용되는 CSS 명명 규칙에 대한 자세한 설명

다음 편집기에서는 중요한 CSS 속성 float에 대한 학습 경험(공유)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다.

중요한 CSS 속성인 float를 살펴보겠습니다.

다음 내용은 다음 섹션으로 구분됩니다.

1: float 속성

2: float 속성의 특성

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

　2.2: float의 상위 요소 높이가 축소됩니다.

3: float를 지우는 방법

3.1: HTML 방법

　3.2: CSS 의사 요소 방법

4: 부동 간격 조정

5: 부동 요소 차단

6: 부동 유동 레이아웃

6.1: 일방적 고정

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

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

6.4: 스마트 레이아웃

1: float 속성

float는 이름에서 알 수 있듯이 부동을 의미합니다. 하지만 CSS에서는 float로 이해됩니다. float에는

float:none;   
float:left;   
float:rightright;   
float:inherit;

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

2: float 속성의 특징

　2.1: float의 텍스트 줄바꿈 효과

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

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

<p class="container">
    <p class="content"></p>
    <p>
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!   
        </p>
    </p>

.container {   
  width: 300px;   
  height: 300px;   
  border: 1px solid black;   
}   
.container .content {   
  float: left;   
  width: 150px;   
  height: 150px;   
  background-color: lightpink;   
  margin: 5px;   
}

content 요소가 부동 상태로 설정되어 p 요소가 문서 흐름에서 벗어나고 주위에 표시될 텍스트입니다.

　2.2: float의 상위 요소가 크게 축소되었습니다.

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

<p class="container">
    <p>
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!   
    </p>
</p>

는 접은 후 CSS와 데모를 보면 다음과 같습니다.

.container {   
  width: 300px;   
  border: 1px solid black;   
}   
.container p {   
  float: left;   
}

3: 플로트 제거 방법

그러면 질문이 생깁니다. , 내부 요소가 부동되는 경우 상위 요소의 높이 붕괴를 피하는 방법은 무엇입니까?

부모 요소에 높이를 직접 설정하면 충분하지 않을까?라고 생각하는 학생들도 있을 것입니다. 실제로는 불가능합니다. 왜냐하면 상위 요소의 높이가 고정되어 있으면 나중에 콘텐츠를 추가하려면 CSS 코드를 수정해야 하는데, 이는 매우 번거로운 작업입니다.

부모 요소의 높이 붕괴 문제를 해결하는 방법에는 두 가지가 있습니다.
　
3.1: 상위 요소의 하단에 빈 p를 추가한 다음, Clear: Both 속성을 추가합니다.

코드는 다음과 같습니다.

<p class="container">
            <p>
            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!   
            </p>
            <p class="clearfix"></p>
        </p>

.container {   
  width: 300px;   
  border: 1px solid black;   
}   
.container p {   
  float: left;   
}   
.container .clearfix {   
  overflow: hidden;   
  *zoom: 1;   
}

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

<p class="container">
            <p>
            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!   
            </p>
        </p>

.container {   
  width: 300px;   
  border: 1px solid black;   
  *zoom: 1;   
}   
.container p {   
  float: left;   
}   
.container:after {   
  content: "";   
  display: table;   
  clear: both;   
}

4: float 요소 간격 조정이란 무엇입니까

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

5: 부동 요소 차단

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

6: 부동 유동 레이아웃

　6.1: 단면 고정, 오른쪽 적응형 레이아웃.

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

.container{   
    max-width:90%;   
    margin:0 auto;   
}   

.left{   
    float:left;   
    text-align:center;   
    background-color: lightpink;   
    width: 200px;   
    height:300px;   
}   

.rightright{   
    background-color: lightyellow;   
    margin-left:200px;   
    height:300px;   
    padding-left:10px;   
}

6.2: 다양한 DOM 및 디스플레이 위치를 사용한 일방적 고정

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

rrree

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

　6.3: 동일한 디스플레이 위치로 DOM을 일방적으로 고정

.container {   
  max-width: 90%;   
  margin: 0 auto;   
}   
.container .rightright {   
  float: rightright;   
  width: 200px;   
  height: 200px;   
  background-color: lightpink;   
}   
.container .left {   
  background-color: lightyellow;   
  margin-right: 200px;   
  height: 300px;   
  padding-left: 10px;   
}

<p class="container">
            <p class="left-content">
                <!-- 左浮动+width100% -->
                <p class="left">margin-right</p>
            </p>
            <p class="right">左浮动+固定宽度+margin-left负值</p>
        </p>

6.4: 스마트 레이아웃

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

아아아아

아아아아아아아

요약하면 다음과 같습니다.

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

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

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

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

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

위 CSS의 중요한 속성인 float에 대한 학습 경험(공유)은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 모두가 PHP 중국어를 지원하게 될 것입니다.