집 > 기사 > 웹 프론트엔드 > 웹 페이지 레이아웃 방법: 클리어 플로팅

웹 페이지 레이아웃 방법: 클리어 플로팅

php中世界最好的语言원래의: 2018-03-13 11:00:301713검색

이번에는 웹페이지의 레이아웃 방법 중 하나인 플로트 지우기를 소개하고, 플로트 지우기의 주의사항은 무엇인지 살펴보겠습니다.

상자 높이

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!