额外标签法
使用:after 伪元素
给父元素定高
利用overflow:hidden;属性
父元素浮动
父元素处于绝对定位
在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题
引出问题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width:300px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html> 可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上写边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下
解决办法：
1.使用额外标签发
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } .clearfix{ clear: both; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="clearfix"></div> </div> <div class="footer"></div></body></html> 这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美
2.使用:after 为元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } .clearfix:after{ /*最简方式*/ content: ''; display: block; clear: both; } /* 新浪使用方式 .clearfix:after{ content: ''; display: block; clear: both; height: 0; visibility: hidden; } */ .clearfix{ /*兼容 IE*/ zoom: 1; } </style></head><body> <div class="outer clearfix"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html> 3.给父元素定高
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; height: 50px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html> 4.利用 overflow:hidden 属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; overflow: hidden; zoom: 1;/*兼容 IE*/ } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html> 5.父元素浮动
当父元素浮动的时候，无需为子元素的浮动清除浮动,布局时经常用到
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; float: left; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html> 可以看出虽然 outer DIV 消除了塌陷现象，但由于其也发生了浮动故，其后元素若无处于正常文档流，会被跌在底下。
如果要解决可以参考前面的办法。
例如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; float: left; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } .clearfix:after{ content: ""; display: block; clear: both; } .clearfix{ zoom: 1; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="clearfix"></div> <div class="footer"></div></body></html> 6.父元素处于绝对定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; position: absolute; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="clearfix"></div> <div class="footer"></div></body></html>
与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。
HTML의 다양성 : 응용 및 사용 사례Apr 30, 2025 am 12:03 AMHTML은 웹 페이지의 골격 일뿐 만 아니라 많은 분야에서 더 널리 사용됩니다. 1. 웹 페이지 개발에서 HTML은 페이지 구조를 정의하고 CSS와 JavaScript를 결합하여 풍부한 인터페이스를 달성합니다. 2. 모바일 애플리케이션 개발에서 HTML5는 오프라인 스토리지 및 지리적 위치 기능을 지원합니다. 3. 이메일 및 뉴스 레터에서 HTML은 이메일의 형식 및 멀티미디어 효과를 향상시킵니다. 4. 게임 개발에서 HTML5의 Canvas API는 2D 및 3D 게임을 만드는 데 사용됩니다.
HTML 문서의 루트 태그는 무엇입니까?Apr 29, 2025 am 12:10 AMTheroottaginanhtmldocumentis.itservesasthetop-levellement thatenCapsulateslotherContent, 프로퍼 디코 언어 구조에있는 BrowserParsing을 보장합니다.
HTML 태그와 요소가 같은 것입니까?Apr 28, 2025 pm 05:44 PM이 기사는 HTML 태그가 요소를 정의하는 데 사용되는 구문 마커이고 요소는 태그 및 내용을 포함한 완전한 단위라고 설명합니다. 그들은 웹 페이지를 구조화하기 위해 협력합니다. character count : 159
& lt; head & gt의 중요성은 무엇입니까? & lt; Body & Gt; html에서 태그?Apr 28, 2025 pm 05:43 PM이 기사는 & lt; Head & gt의 역할에 대해 설명합니다. & lt; Body & Gt; HTML의 태그, 사용자 경험에 미치는 영향 및 SEO 영향. 적절한 구조화는 웹 사이트 기능 및 검색 엔진 최적화를 향상시킵니다.
& lt; strong & gt;, & lt; b & gt; 태그 및 & lt; em & gt;, & lt; i & gt; 태그?Apr 28, 2025 pm 05:42 PM이 기사는 HTML 태그, 등의 차이점과 시맨틱 대 프리젠 테이션 사용 및 SEO 및 접근성에 미치는 영향에 중점을 둡니다.
HTML의 문서에서 사용중인 문자 세트를 표시하는 방법을 설명해 주시겠습니까?Apr 28, 2025 pm 05:41 PM기사는 UTF-8에 중점을 둔 HTML에서 문자 인코딩 지정에 대해 논의합니다. 주요 이슈 : 올바른 텍스트 표시 보장, 멍청한 문자 방지 및 SEO 및 접근성 향상.
HTML의 다양한 형식 태그는 무엇입니까?Apr 28, 2025 pm 05:39 PM이 기사는 웹 컨텐츠를 구조화하고 스타일링하는 데 사용되는 다양한 HTML 서식 태그에 대해 논의하여 텍스트 모양에 미치는 영향과 접근성 및 SEO에 대한 시맨틱 태그의 중요성을 강조합니다.
'ID'속성과 HTML 요소의 '클래스'속성의 차이점은 무엇입니까?Apr 28, 2025 pm 05:39 PM이 기사는 고유성, 목적, CSS 구문 및 특이성에 중점을 둔 HTML의 'ID'와 '클래스'속성의 차이점에 대해 설명합니다. 웹 페이지 스타일링 및 기능에 어떤 영향을 미치는지 설명하고 모범 사례를 제공합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
VSCode Windows 64비트 다운로드
Microsoft에서 출시한 강력한 무료 IDE 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
