이전 상위 요소의 높이를 설정하십시오. 참고 : 엔터프라이즈 개발에서는 할 수 있다면 높이를 쓰지 마십시오.
<! docType html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </title> <tyle> .smallbox1 {width : 100px; 높이 : 100px; 배경색 : 빨간색; Boder : 3px 솔리드 블랙; 여백 : 5px; float : right;} .smallbox2 {너비 : 100px; 높이 : 100px; 배경색 : 빨간색; Boder : 3px 솔리드 블랙; 여백 : 5px;} .smallbox3 {너비 : 100px; 배경색 : 빨간색; Boder : 3px 솔리드 블랙; 여백 : 5px;} .smallbox3 {너비 : 100px; 높이 : 100px; 배경색 : 빨간색; Boder : 3px 솔리드 블랙; 여백 : 5px;} .smallbox4 {너비 : 100px; 높이 : 100px; 배경색 : 빨간색; Boder : 3px 솔리드 블랙; 여백 : 5px;} .smallbox5 {너비 : 100px; 높이 : 100px; 배경색 : 빨간색; Boder : 3px 솔리드 블랙; 여백 : 5px;} .smallbox6 {너비 : 100px; 높이 : 100px; 배경색 : 빨간색; 바디 : 3px 솔리드 블랙; 마진 : 5px;} .Bigbox1, .bigbox2 { /*너비 : 400px;* / /*너비 : 400px;* / background-color : green; 국경 : 3px 검은 색 고체; . 클래스 = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. 플로트를 청소하는 두 번째 방법다음 속성에 명확한 속성을 추가하십시오
명확한 속성은 값을 취합니다.
없음 : 기본값은 부동 요소의 분류 규칙에 따라 정렬됩니다 (왼쪽 플로트를 찾기 위해 왼쪽 플로트, 오른쪽 플로트를 찾기 위해 오른쪽 플로트)
왼쪽 : 왼쪽 떠 다니는 요소를 찾지 마십시오.
오른쪽 : 앞쪽에 오른쪽 떠 다니는 요소를 찾지 마십시오.
둘 다 : 왼쪽 떠 다니는 요소를 찾지 마십시오.
예를 들어 : 우리는 큰 상자의 너비와 높이를 설정하지 않으며, 작은 상자는 큰 상자를 지원하지만, 두 개의 큰 상자는 이로 인해 줄에 있습니다.
.smallbox1 {너비 : 100px; 높이 : 100px; 플로트 : 왼쪽; 배경색 : 빨간색; 국경 : 2px 솔리드 블랙; } .smallbox2 {너비 : 100px; 높이 : 100px; 플로트 : 왼쪽; 배경색 : 빨간색; 국경 : 2px 솔리드 블랙; } .smallbox3 {너비 : 100px; 높이 : 100px; 플로트 : 왼쪽; 배경색 : 파란색; 국경 : 2px 솔리드 블랙; } .smallbox4 {너비 : 100px; 높이 : 100px; 플로트 : 왼쪽; 배경색 : 파란색; 국경 : 2px 솔리드 블랙; } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <div class = smallbox4> </div> </body>우리는 세 번째 작은 상자의 명확한 속성을 사용하므로 새 줄을 시작할 수 있습니다 (네 번째 라인은 필요하지 않습니다. 세 번째 라인이 네 번째 옆에 있기 때문에 필요하지 않습니다). 코드를 수정하기 위해 세 번째 작은 상자의 코드 만 있으면됩니다.
.smallbox3 {clear : 왼쪽; 너비 : 100px; 높이 : 100px; 플로트 : 왼쪽; 배경색 : 파란색; 국경 : 2px 솔리드 블랙; }참고 : 여백 속성이 만료되었으며 다음에 만료되지 않는 방법에 대해 이야기 할 것입니다.
3. 소스 코드 :D131_CLEARFLOAT.HTML
d132_clearattribute.html
주소:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
요약위의 것은 편집자가 당신에게 소개하는 부유 식 HTML을 지우는 두 가지 방법입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!
이 기사가 도움이된다고 생각되면 다시 인쇄하십시오. 소스를 표시하십시오. 감사합니다!