CSS에서 부동 소수점을 지우는 여러 가지 방법에 대한 자세한 소개

플로트란 무엇인가요?

기능: 1--플로팅 요소는 표준 흐름의 공간을 차지하지 않지만 표준 흐름의 텍스트 레이아웃에 영향을 미칩니다. 플로팅은 왼쪽과 오른쪽에만 떠 있습니다.
2--플로팅 요소 A의 위치는 이전 요소와 관련이 있습니다. A의 상단은 float가 있는 경우 이전 요소의 상단과 정렬되고, float가 없으면 하단과 정렬됩니다.
3--부모 상자의 하위 상자. 하위 항목 중 하나가 플로팅된 경우 한 줄을 표시하려면 다른 하위 항목도 플로팅되어야 합니다.
4--요소가 플로팅된 후 너비와 높이가 설정되지 않은 경우 요소는 콘텐츠의 양에 따라 콘텐츠의 크기를 설정하고 인라인 블록 요소의 속성을 갖습니다.
5--요소가 부동된 후 상위 요소가 높이를 설정하지 않은 경우. 상위 요소의 높이가 축소됩니다.
이 문제를 해결하시겠습니까?
-----상위 요소에 속성 추가:overflow:hidden; 초과 부분 숨기기

overflow 속성:
상자의 요소가 블랙 박스 자체의 크기를 초과하면 내용이 표시되는 방식
: 내용은 잘리지 않으며 요소 상자 외부에 표시됩니다(기본값)
숨겨진: 잘리고 숨겨집니다. 이 속성을 사용하여 부동을 지울 수 있습니다.
자동: 스크롤 막대를 적응적으로 표시합니다.
스크롤: 내용

bfc:
Overflow는 요소의 bfc를 트리거할 수 있으며, 이를 통해 요소는 레이아웃 공간과 권한을 가질 수 있으며, bfc 내의 모든 요소는 상위 요소에 따라 조판되고 배치됩니다. 요소. 모든 상위 요소가 래핑되어 높이 축소 원칙의 문제를 해결합니다.
플로팅, 포지셔닝, 오버플로, 디스플레이, 테이블, 테이블-셀 모두 bfc를 트리거할 수 있습니다.

플로트 지우기:
-- 이는 현재 요소의 왼쪽과 오른쪽에 플로팅 요소가 없으면 해당 요소가 표준 흐름으로 표시된다는 의미입니다.
--부레를 제거하는 네 가지 방법:
1. 빈 마커를 사용하여 부표를 제거하고 벽에 놓습니다. 태그를 추가합니다.
플로팅 라벨 뒤에 915caa8c7a7823c8ba9e5493889b0db994b3e26ee717c64999d7867364b1b4a3를 추가하고 너비와 높이를 설정하지 않은 다음 .clearboth{clear:both}를 설정한 다음 빈 라벨 뒤에 필수 라벨을 넣습니다. label 그게 다야
2. 오버플로 속성을 사용하여 플로트를 지웁니다. 우발적인 부상을 초래할 수 있습니다.
overflow:hidden;
3. float를 지우려면 after 의사 객체를 사용하세요.
4. float를 지우려면 before after 의사 객체를 사용하세요.
clearfix(일반적으로 사용되는 방법 2, 3, 4의 조합).

.clearfix
   父盒子要把子盒子包裹住，触发bfc同时清除前后浮动。
   .clearfix{
      display:table;<!-- 触发dfc -->

   }
   .clearfix:before,.clearfix:after{
      content:"";
      display:block;
      clear:both;
      height:0;
   }
   在ie6中display:table;不能触发dfc，所以用以下方式进行触发
   .clearfix{
      _zoom:1;
   }

사용법:

<p class="top">top</p>
	<p class="clearfix">
	    <p class="left">left</p>
	    <p class="right">right</p>
	</p>			
	<p class="bottom">bottom</p>

.clearfix{
			 	display: table;/* 触发nfc */
			 }
			 .clearfix:before,.clearfix:after{
				/* 前后加一个空的标签清除浮动 */
				content: "";
				display: block;
				height: 0;
				clear: both;
			 }
			 .clearfix{
			 	_zoom:1;/* 为了兼容ie6 */
			 }

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