이번에는 웹페이지의 레이아웃 방법 중 하나인 플로트 지우기를 소개하고, 플로트 지우기의 주의사항은 무엇인지 살펴보겠습니다.
상자 높이
1. 표준 흐름의 상자 높이는 콘텐츠 높이에 따라 지원될 수 있습니다.
2.플로팅 흐름의 플로팅 콘텐츠는 상자 높이를 지원할 수 없습니다. 플로트가 명확해야 하는 이유는 무엇입니까?
박스 사이에 인접해 있는 경우 앞 상자에 높이가 없으면 뒷 상자의 플로팅 요소가 앞 상자의 플로팅 요소를 찾게 되어 인터페이스에 혼란이 발생하게 됩니다.
수레 지우기 방법 1:
해결 방법:
이전 상위 요소의 높이 설정
참고:
엔터프라이즈 개발에서는 높이를 쓰지 않고도 높이를 쓸 수 있으므로 이 방법을 사용하세요.
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
height: 20px; //给前面盒子设置高度
background-color: red;
}
.box2{
background-color: green;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
} </style>body:
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p>
</div>Clear float 메서드 2:
해결책:
백 박스에clear:both; 속성 추가
clear 속성 값:
none: 기본값, 플로팅 요소의 정렬 규칙에 따라 정렬합니다(왼쪽에 플로팅된 경우 왼쪽 플로팅을 찾고, 오른쪽에 플로팅된 경우 오른쪽 플로팅을 찾습니다)
left: 이전 왼쪽 플로팅 요소를 찾지 않습니다. 이전 왼쪽 플로팅 요소와 같은 줄)right: 이전 오른쪽 플로팅 요소를 찾지 않음
both : 이전 왼쪽 플로팅 요소와 오른쪽 플로팅 요소를 찾지 않음
참고:
clear 속성을 추가할 때 요소에 대해 이 속성의 여백 속성은 무효화되므로 사용을 권장하지 않습니다.
CSS:
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 1px solid #000;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
clear: both; //给后面的盒子添加clear:both;属性
margin-top: 28px;
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
} </style>플로팅 방법 3 지우기:
해결책:
외벽 방법: 추가 블록 수준 요소 추가 부동 하위 요소가 있는 두 상자 사이에, 양쪽 속성을 설정합니다.
참고:
외벽 방법을 사용하면 두 번째 상자가 margin-top 속성을 사용할 수 있습니다.
외벽 방법은 첫 번째 상자를 허용하지 않습니다.margin-bottom
속성을 사용하려면 추가 라벨의 높이를 설정하면 마진 효과를 얻을 수 있습니다. 이 기술은 Sohu에서 널리 사용되지만 의미 없는 내용을 많이 추가해야 하기 때문에 권장하지 않습니다. 태그;
CSS:
<style>
*{
margin: 0;
padding: 0;
}
.box1{
background-color: red; /*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,
}
.box2{
background-color: green; /*margin-top: 10px;*/ //外墙法它可以让第二个盒子使用margin-top属性,
}
.box1 p{
width: 100px;
background-color: blue;
}
.box2 p{
width: 100px;
background-color: yellow;
}
p{
float: left;
}
.wall{
clear: both; //设置clear: both;属性;
}
.h20{
height: 20px; //设置额外标签的高度来实现margin效果;
background-color: skyblue;
}
</style>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>Clear float 방법 4:
해결책:
내부 벽 방법:
1 첫 번째 상자의 모든 하위 요소는 최종적으로 블록 수준 요소를 추가합니다.2 Clear를 설정합니다. ; 이 추가 블록 수준 요소에 대한 속성입니다.
참고:
두 번째 상자를 만들 수 있습니다. margin-top 속성을 사용하세요.
첫 번째 상자에서 margin-bottom 속성을 사용할 수 있는 내부 벽 방법<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>
외벽공법은 첫 번째 박스의 높이를 지탱할 수 없고, 내벽공법은 첫 번째 박스의 높이를 지탱할 수 없습니다. 의 첫 번째 상자
기업 개발에서는 플로팅을 클리어하는 데 일반적으로 파티션 방식을 사용하지 않습니다. (칸막이벽 방식: 외벽 방식 및 내벽 방식)
CSS :
<style>
*{ margin: 0; padding: 0;
} .box1{ background-color: red; /*margin-bottom: 10px;*/
} .box2{ background-color: green; /*margin-top: 10px;*/
} .box1 p{ width: 100px; background-color: blue;
} .box2 p{ width: 100px; background-color: yellow;
} p{ float: left;
} .wall{ clear: both;
} .h20{ height: 20px; background-color: skyblue;
} </style></head>
<div class="box1">
<p>我是文字1</p>
<p>我是文字1</p>
<p>我是文字1</p>
<div class="wall h20"></div> //设置内墙</div><div class="box2">
<p>我是文字2</p>
<p>我是文字2</p>
<p>我是文字2</p></div>이 글을 읽고 나면 그 방법을 마스터하셨으리라 믿습니다. 이 기사의 경우에 대한 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
CSS 배경 및 스프라이트CSS 표시 모드 사용 방법위 내용은 웹 페이지 레이아웃 방법: 클리어 플로팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
