이번에는 웹페이지의 레이아웃 방법 중 하나인 플로트 지우기를 소개하고, 플로트 지우기의 주의사항은 무엇인지 살펴보겠습니다.
상자 높이
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!