html_CSS/HTML에서 부동 소수점을 지우는 6가지 방법의 예

display: inline-block을 사용할 때 발생하는 상황:

1. 블록 요소를 한 줄로 표시합니다.
2. 인라인이 너비와 높이를 지원하도록 만듭니다.
3. 줄 바꿈이 구문 분석됩니다
4. 설정하지 않으면 내용에 따라 너비가 확장됩니다
5. IE6 및 7에서는 블록 태그가 지원됩니다

inline-block 속성이 줄바꿈(간격 포함) 시 구문 분석되므로 해결책은 float: left/right

float:

사용 시 발생하는 상황을 사용하는 것입니다. 블록 요소를 한 줄에 표시합니다.
2. 인라인 요소가 너비 높이를 지원하도록 합니다
3. 너비와 높이가 설정되지 않으면 콘텐츠에서 너비를 지원합니다.
4. 인라인 요소를 사용할 때, 부동 요소를 사용하여 간격을 없앨 수 있습니다.
5. 요소에 부동 요소를 추가하면 문서 흐름에서 벗어나 상위 요소의 경계에 닿거나 다른 부동 요소에서 멈출 때까지 지정된 방향으로 이동합니다(문서 흐름은 다음과 같습니다). 문서에서 표시 가능한 객체가 정렬되었을 때 차지하는 위치)

코드 복사 코드는 다음과 같습니다.

div1

div2

span1
span2
< ;/body>

아래 코드에서는 box1만 부동하므로 box1과 box2가 겹칩니다. 둘 다 플로팅이면 겹치지 않습니다

코드 복사 코드는 다음과 같습니다.

< ;!DOCTYPE HTML>



<제목>제목 없는 문서
<스타일>
.box1{ 너비:100px;높이:100px;배경:빨간; 부동:왼쪽;}
.box2{ 너비:200px;높이:200px;배경:blue; /* float:left;*/}

부동소수를 지우는 방법: 1. 상위에 부동소수점 추가
(이 경우 상위 여백: 0 자동, 중앙에 위치하지 않음)

코드 복사 코드는 다음과 같습니다.

< head>


< 스타일> ;
.box{ 너비:300px;여백:0 자동;테두리:10px 솔리드 #000; 부동:왼쪽;}
.div{ 너비:200px;높이:200px;배경:빨간색;부동산:왼쪽 ; }
/*
float 지우기
1. 부모에 float 추가(더 이상 중앙에 위치하지 않음)
*/

 

2. 상위 항목에 display:inline-block;을 추가합니다(방법 1과 동일, 중앙에 위치하지 않음. IE6 및 7만 해당). 중심 )

코드 복사 코드는 다음과 같습니다.

 

3. 플로팅 요소 아래에

.clear{ height:0px를 추가합니다. -size:0;clear:both;} 그러나 IE6에서는 블록 요소의 최소 높이가 있습니다. 즉, 높이가 19px 미만인 경우 기본값은 19px입니다. 해결책: 글꼴 크기:0; 또는 Overflow:hidden;

코드 복사 코드는 다음과 같습니다.

< ;html>



.box{ 너비:300px;margin:0 auto;border:10px solid #000;}
.div{ 너비:200px;height:200px;배경:red;float:left;}
/*
float 지우기
1. 상위 항목에 float를 추가합니다.
2. 상위 항목에 display:inline-block을 추가합니다.
3. 아래에

플로팅 요소

.clear{ height:0px;font-size:0;clear:both;}
4. 아래에
을 추가하세요. 플로팅 요소 */

 

   

5. 추가 {zoom:1;}
:after{content:""; display:block;clear:both;}

코드 복사 코드는 다음과 같습니다.

< div class="div">

6 .Add Overflow:auto;

코드 복사 코드는 다음과 같습니다.

< ;div class= "box">