CSS Float 및 관련 레이아웃 모드-CSS 튜토리얼-php.cn

CSS Float 및 관련 레이아웃 모드

高洛峰

풀어 주다： 2016-11-01 15:40:27

원래의

2037명이 탐색했습니다.

부동소수 값

CSS Float 및 관련 레이아웃 모드

밤을 보세요

빨간색 와이어프레임은 상위 요소를 나타냅니다

CSS Float 및 관련 레이아웃 모드

문서 흐름에서 분리되어 실제로는 완전히 분리되지 않고 상위 요소의 경계에 의해 차단됩니다.

float 요소는 동일한 문서 흐름에 있습니다

밤나무를 보세요:

빨간색 선 상자는 상위 요소를 나타냅니다

CSS Float 및 관련 레이아웃 모드

세 개의 하위 요소가 "왼쪽으로 부동"된 후에는 상위 요소에 콘텐츠가 없으므로 상위 요소에는 높이가 없습니다.

float 요소는 문서 흐름에서 반 분리되어 있습니다.

요소의 경우 콘텐츠의 경우 문서 흐름에서 분리됩니다. 문서 흐름에 있습니다. 요소는 겹치지만 내용은 겹치지 않습니다.

CSS Float 및 관련 레이아웃 모드

밤 하나 주세요:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float元素半脱离文档流</title>
    <style type="text/css">
    body{
        width: 300px;padding: 5px;line-height: 1.6;
        border: 1px dashed blue;
    }
    .sample{
        height: 100px;margin-right: 5px;
        padding: 0 5px; line-height: 100px;background-color: pink;
    }
    .sb{
        outline: 1px dashed  red;

    }
    .sample{
        float: left;
    }
    </style>
</head>
<body>
<div class="sample">float : left </div>
<div class="sb">
A float is a box that is shifted to the left or right on the current line .
the most interesting characteristic of a float (o "floated" o "floating" box)
is that content may flow along its side (or be prohibited from doing so by the &#39;clear&#39;
property).
</div>
</body>
</html>

로그인 후 복사

CSS Float 및 관련 레이아웃 모드

밤 하나 더 주세요:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }
    

    </style>
</head>
<body>
    <div class="sb">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

로그인 후 복사

CSS Float 및 관련 레이아웃 모드

보통 우리는 이런 결과를 원하지 않지만, 분홍색 div는 첫 번째 텍스트 블록으로만 둘러싸여 있습니다.

clear

clear 속성을 사용해야 합니다. Clear를 이해하려면 먼저 div가 블록 수준 요소이며 점유한다는 점을 알아야 합니다. 페이지 내 자체 행, 위에서 아래 배열, 즉 전설적인 흐름

CSS Float 및 관련 레이아웃 모드

①을 후속 요소에 적용하여 후속 요소에 떠 있는 영향을 제거합니다.

②블록 수준 요소에 적용

사용법:

빈 요소 추가(덜 사용됨)

clearfix , 이는 다음과 같습니다. 일반적인 해결책. 실제로 사용할 수 없는 점이 플로트를 지우는 데 사용됩니다.

예:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>float abscure</title>
    <style type="text/css">
    body{
        width: 400px;line-height: 1.6;
    }
    .sample{
        width: 100px;line-height: 100px;
        margin: 3px;text-align: center;
        background-color: pink;
    }
    .sb{
        margin: 10px auto; padding: 5px; border: 1px dashed #0f00fa;
    }
    .sample{
        float: left;
    }

    .clearfix:after{
        content: &#39;.&#39;;     /* 在clearfix后面加入一个 . */
        display: block; /* 设置 . 块级元素 */
        clear: both;  /* 清除浮动效果 */

        /*隐藏那个 .  */
        height: 0;       
        overflow: hidden;
        visibility: hidden;

    }

/*    .clearfix{
    zoom: 1; 由于在IE 低版本中，不支持after属性，所以需要增加zoom属性 
    } */

    </style>
</head>
<body>
    <div class="sb clearfix">
            <div class="sample">float: left;</div>
        第十二届ChinaJoy 动漫游戏展7月31号在上海新国际博览中心开幕，导出是站台表演的帅哥美女。
    </div>
    

    <div class="sb">
        有些游戏商为了吸引人气，还请来了著名的演员、模特前来助阵。以下是一批漂亮的Show Girl现场照片。
    </div>
</body>
</html>

로그인 후 복사

CSS Float 및 관련 레이아웃 모드