css中的float：
float:left 左浮动
float:right 右浮动
float:none 不浮动
float:inherit 继承浮动(继承父元素浮动属性，如果父元素无浮动属性，inherit失效)
浮动产生哪些问题：1.父元素塌陷，没有高度。2.网页中的临近元素出现异位
清除浮动的几种方法：
1.手动给父元素添加高度 缺点：如果子元素过多且数量不确定，设置较为复杂。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/*给父级元素添加高度 */
*{
padding:0;
margin:0;
}
.news {
background-color: red;
border: solid 1px black;
height:200px; /*设置高度，如果去掉高度元素塌陷*/
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div>
<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" / alt="CSS에서 수레를 지우는 방법" >
<p>some text</p>
</div>
</body>
</html>2.用clear属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 清除浮动 clear*/
*{
margin:0;
padding:0;
}
.news {
background-color: red;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.content{
clear:both;/*两边都清除浮动*/
}
</style>
</head>
<body>
<div>
<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" / alt="CSS에서 수레를 지우는 방법" >
<p>some text</p>
<div></div>
</div>
</body>
</html>3.给父元素添加overflow属性并结合zoom:1使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 给父级元素添加overflow:hidden; */
*{
margin:0;
padding: 0;
}
.news {
background-color: red;
border: solid 1px black;
overflow: hidden; /*溢出隐藏*/
zoom:1;/*兼容IE浏览器*/
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div>
<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" / alt="CSS에서 수레를 지우는 방법" >
<p>some text</p>
</div>
</body>
</html>4.给父级元素添加浮动 缺点：相邻元素位置异常
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 给父级元素添加浮动 */
*{
margin:0;
padding:0;
}
.news {
background-color: red;
border: solid 1px black;
float: left; /* 给父级元素添加浮动 */
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div>
<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" / alt="CSS에서 수레를 지우는 방법" >
<p>some text</p>
</div>
</body>
</html>5.使用:after伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
/* 使用伪元素：after添加浮动 */
*{
margin:0;
padding:0;
}
.news {
background-color: red;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clearfix:after{
content: "\0020";/*在父容器的结尾处放一个空白字符*/
display: block;
height: 0; /*让这个空白字符不显示出来*/
clear: both;
}
/* 兼容IE6和IE7,触发haslayout */
.clearfix{
zoom:1;
}
</style>
</head>
<body>
<div class="news clearfix">
<img src="/static/imghwm/default1.png" data-src="1.jpg" class="lazy" / alt="CSS에서 수레를 지우는 방법" >
<p>some text</p>
</div>
</body>
</html>위 내용은 CSS에서 수레를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PMCSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.
CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.
CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.
CSS 박스 크기 부동산은 무엇을합니까?Apr 30, 2025 pm 03:18 PM이 기사는 요소 치수 계산 방법을 제어하는 CSS 박스 크기 속성에 대해 설명합니다. Content-Box, Border-Box 및 Padding-Box와 같은 값과 레이아웃 설계 및 형태 정렬에 미치는 영향을 설명합니다.
CSS를 사용하여 어떻게 애니메이션 할 수 있습니까?Apr 30, 2025 pm 03:17 PM기사는 CSS, 주요 특성 및 JavaScript와 결합 된 애니메이션 작성에 대해 논의합니다. 주요 문제는 브라우저 호환성입니다.
CSS를 사용하여 프로젝트에 3D 변환을 추가 할 수 있습니까?Apr 30, 2025 pm 03:16 PM기사는 3D 변환, 주요 속성, 브라우저 호환성 및 웹 프로젝트에 대한 성능 고려 사항에 대한 CSS 사용에 대해 논의합니다. (문자 수 : 159)
CSS에 기울기를 추가 할 수있는 방법은 무엇입니까?Apr 30, 2025 pm 03:15 PM이 기사는 CSS 그라디언트 (선형, 방사형, 반복)를 사용하여 웹 사이트 비주얼을 향상시키고 깊이, 초점 및 현대적인 미학을 추가합니다.
CSS의 의사 요소는 무엇입니까?Apr 30, 2025 pm 03:14 PM기사는 CSS의 의사 요소, HTML 스타일을 향상시키는 데 사용 및 의사 급의 차이점에 대해 설명합니다. 실제 사례를 제공합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
