CSS 플로팅에 대한 자세한 소개-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 플로팅에 대한 자세한 소개

高洛峰

Mar 20, 2017 pm 04:11 PM

1. 표준 흐름은 브라우저의 기본 레이아웃으로 위에서 아래로, 왼쪽에서 오른쪽으로 기본 일정 레이아웃이 설정됩니다.

CSS 플로팅에 대한 자세한 소개

2. 레이아웃 방법

　2.1 플로팅의 본질: 그림과 텍스트의 서식 문제를 나란히 해결합니다.

*요소가 부동된 후에는 표준 흐름에서 벗어나 레이아웃에 영향을 미칩니다.

　2.1.1 float 설정 전(before):

　 CSS 플로팅에 대한 자세한 소개

　2.1.2. 이후(after)

　 CSS 플로팅에 대한 자세한 소개

* {
                padding: 0;
                margin: 0;
            }

            .box1 {
                width: 50px;
                height: 40px;
                background-color: #AFEEEE;
                border: 2px solid #3C3C3C;
                float: left;
            }
            
            .box2 {
                width: 300px;
                height: 300px;
                background-color: #ADFF2F;
                border: 2px solid #3C3C3C;
                
            }

로그인 후 복사

　 *플로팅 요소는 표준 흐름의 공간을 차지하지 않습니다. 그러나 이는 표준 스트림의 텍스트 형식에 영향을 미칩니다.

3.플로팅의 특징

　3.1.플로팅은 표준흐름과 분리되어 위치를 차지하지 않으므로 표준흐름에 영향을 미친다. 부동은 왼쪽과 오른쪽에만 떠 있습니다.

3.2.플로팅 요소 A의 배열 위치는 이전 요소(블록 수준)와 관련됩니다. 이전 요소에 부동 소수점이 있는 경우 A 요소의 상단은 이전 요소의 상단에 정렬됩니다. 이전 요소가 표준 흐름이면 A 요소의 상단은 이전 요소의 하단에 정렬됩니다. .

3.3.상위 상자의 하위 상자 중 하나가 플로팅된 경우, 한 줄에 정렬되어 표시되도록 하려면 다른 하위 상자도 플로트되어야 합니다.

　3.4.Float는 요소의 쓰기 위치에 따라 해당 float를 표시합니다.

　3.5. 요소가 플로팅된 후 너비와 높이가 설정되지 않으면 해당 요소는 인라인 블록 요소의 특성을 갖게 됩니다. 요소의 크기는 정의된 크기나 기본 콘텐츠에 따라 전적으로 달라집니다. 즉, 요소가 래핑됩니다.

3.6. 플로팅은 파괴적입니다. 요소가 플로팅된 후 원래의 일반 흐름 레이아웃을 파괴하고 콘텐츠가 붕괴됩니다.

참고: 표준 흐름의 상위 상자가 높게 설정되지 않고 모든 하위 상자가 부동 상태인 경우 상위 상자의 높이는 0으로 축소됩니다.

4. 부동 파괴성에 의한 축소 문제

　4.1.overflow방법: 오버플로 설정: 상위 상자에 숨겨짐(포장하도록 함)

　 CSS 플로팅에 대한 자세한 소개

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>溢出处理案例</title>
        <style>
            .box1 {
                /*滚动条随着需要而产生*/
                height: 60px;
                width: 60px;
                overflow: auto;
                float: left;
                background-color: #5F9EA0;
            }
            
            .box2 {
                height: 60px;
                width: 60px;
                overflow: hidden;
                float: left;
                background-color: #ADFF2F;
            }
            
            .box3 {
                height: 60px;
                width: 60px;
                overflow: visible;
                float: left;
                background-color: #CCCCCC;
            }
            .box4 {
                /*始终有滚动条*/
                height: 160px;
                width: 160px;
                overflow: scroll;
                float: right;
                background-color: #FFC0CB;
                
            }
        </style>
    </head>
    <body>
        <div class="box1">overflow:auto;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box2">overflow: hidden;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box3">overflow: visible;**minking 的博客minking 的博客minking 的博客</div>
        <hr />
        <div class="box4">overflow: scroll;**minking 的博客minking 的博客minking 的博客</div>
    </body>
</html>

로그인 후 복사

5. 보충: BFC

오버플로는 요소의 BFC를 트리거하여 요소가 독립적인 레이아웃 공간과 권한을 갖도록 허용합니다. 레이아웃, 모든 상위 요소에는 높이 축소 문제를 해결하는 원칙인 래핑 속성이 있습니다.

예: 플로팅은 bfc를 트리거할 수도 있으며 위치 지정, 오버플로, 디스플레이: 테이블, 테이블-셀...

6. 웹사이트 핵심 디스플레이 영역은 일반적으로 중앙에 표시됩니다. 너비는 960px 980px 1000px 1190px 1200px입니다.

7. 부동 지우기: 현재 요소의 왼쪽과 오른쪽에 부동 요소가 없는 경우에만 해당 요소가 표준 흐름에 표시됩니다.

************지우기: 왼쪽/오른쪽/모두

위 내용은 CSS 플로팅에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.