clearfix는 이름에서 알 수 있듯이 부동 소수점을 지우는 데 사용됩니다. 일반적으로 부동 소수점 레이아웃에 사용됩니다.
오버플로 문제
Example
의 중국어 번역은
Example
입니다.
해결책을 향해 나아가기 전에 먼저 문제를 살펴보겠습니다. 여기에 오른쪽에 떠 있는 이미지가 있습니다. 이미지는 해당 요소에 속한 요소보다 훨씬 크므로 컨테이너 외부로 넘칩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>We haven't used clearfix below:</p>
<div>
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
출력에 오버플로 문제가 표시됩니다 −
오버플로 자동을 사용하여 클리어 플로팅 문제를 해결하세요
Example
의 중국어 번역은
Example
입니다.
이제 Clearfix로 문제를 해결해 봅시다 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
::after 선택기를 사용하여 부동소수점 지우는 문제 수정
Example
의 중국어 번역은
Example
입니다.
clearfix를 수정하기 위해 ::after 선택기가 여기에 있습니다 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg" alt="Machine Learning" style="max-width:90%" style="max-width:90%">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
위 내용은 클리어픽스란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
