CSS의 부동 소수점에 대한 자세한 설명과 부동 소수점을 지우는 세 가지 방법

float에 대해 이야기하기 전에 CSS 1, 외부의 margin

속성 의 두 가지 특별한 현상에 대해 이야기해 보겠습니다. 거리 병합 현상 :

두 p를 위아래로 정렬하면 위쪽 p에 margin-bottom을 설정하고 p에 margin-top을 설정합니다. p 가 낮으면 두 여백이 병합되고 병합 후 값이 더 큰 여백이 발생합니다.

일반적으로 이 현상을 처리할 필요는 없습니다.

2. 여백 붕괴 현상:

큰 상자에 작은 상자가 포함되어 있고 작은 상자에 여백 상단을 설정하면 큰 상자가 함께 아래쪽으로 이동합니다.

해결책:

1.0 큰 상자에 테두리 border 속성을 추가합니다.

2.0은 큰 상자에 overflow 속성을 ​​설정합니다.

3.0은 부동 소수점을 사용합니다.

보충: 일반적으로 사용되는 오버플로 속성은 다음과 같습니다.

표시

visible	：默认值。内容不会被修剪，会呈现在元素框之外。
Hidden：	内容会被修剪，并且其余内容是不可见的。
Scroll：	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto：	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

: 기본값입니다. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.

숨김：

내용이 잘리고 나머지 내용은 표시되지 않습니다. .

스크롤：

내용은 잘리지만 브라우저에는 스크롤이 표시됩니다. 나머지를 볼 수 있는 바.

자동：

콘텐츠가 잘리면 브라우저는 나머지 콘텐츠를 볼 수 있도록 스크롤 막대를 표시합니다.

플로팅

CSS에서 플로팅은 왜 중요한가요?

은 여러 상자를 한 줄에 표시하는 문제를 해결하는 것입니다.

float: left; float: right;

Float에는 세 가지 특성이 있습니다.

1, 표준 흐름에서 벗어남 , 위치를 차지하지 않습니다.

2는 display 요소의 기본 표시 모드를 블록 수준 요소로 변경합니다.

3. 플로팅된 요소는 다음 블록 수준 요소에만 적용되며 이전 블록 수준 요소에는 영향을 미치지 않습니다.

표준 스트림이란 무엇인가요?

은 상자 배치에 대한 기본 브라우저 표준입니다.

표준 흐름의 특징:

1. 블록 수준 요소는 위에서 아래로 한 줄을 차지합니다.

2, 인라인 요소, 인라인 블록 수준 요소는 왼쪽에서 오른쪽으로 한 줄로 표시됩니다.

3, 자리를 차지하라.

플로팅의 영향과 플로팅을 클리어하는 세 가지 방법

페이지 플로팅의 영향:

만약 부모 상자 상자에 자식 상자가 있고 부모 상자에는 높이가 설정되어 있지 않습니다. 자식 상자는 부모 상자에 떠 있으므로 부모 상자의 높이는 앞으로 부모 상자의 높이가 0이 됩니다. 상자가 0이면 다음 요소가 자동으로 채워지므로 이제 플로트를 지울 차례입니다.

지우기: 둘 다

1, 추가 라벨 방법 사용:

플로팅 상자 아래에 다른 라벨을 넣고 이 라벨에 사용합니다. 둘 다 페이지에 떠 있는 효과를 없애기 위한 것입니다.

.clearfix{

클리어: 둘 다;

}

< /p>

a. 내부 라벨: 이 플로팅 상자의 상위 상자 높이를 다시 엽니다.

b. 외부 라벨: 이 플로팅 상자의 영향을 제거하지만 확장되지는 않습니다. it 상위 상자를 엽니다.

참고: 일반적으로 이 방법은 플로트를 제거하는 데 사용되지 않습니다. 플로트를 제거하는 이 방법은 페이지 레이블을 증가시키기 때문입니다.

2. 오버플로 속성을 사용하여 부동 소수점을 삭제합니다.

먼저 플로팅 상자의 상위 요소를 찾은 다음 상위 요소에 속성을 추가하여 삭제합니다. 상위 요소. 페이지에 떠 있는 하위 요소가 미치는 영향.

overflow: Hidden;

3. 의사 요소를 사용하여 부동소수점 삭제:

.clearfix:after {

content: "";//추가된 콘텐츠가 비어 있습니다

 height: 0;//The content height is 0

 line- height: 0;//콘텐츠 텍스트의 높이는 0입니다

display: block;//텍스트를 블록 수준 요소로 설정

clear:both;// 플로트 지우기

                                                                                 확대/축소: 1;/*예: 6*/ }

표시
: 기본값입니다. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.	숨김 :
내용은 잘리고 나머지 내용은 보이지 않습니다.
스크롤:	콘텐츠는 잘렸지만 나머지 콘텐츠를 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.
자동:	콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.

위 내용은 CSS의 부동 소수점에 대한 자세한 설명과 부동 소수점을 지우는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!