CSS의 float에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS의 float에 대한 자세한 설명

高洛峰

Mar 17, 2017 pm 12:47 PM

float은 아마도 CSS3 이전에는 웹 페이지 레이아웃에서 가장 일반적으로 사용되는 속성이었을 것입니다. 서로 동의하지 않을 때 float되는 코드를 자주 볼 수 있으니 좀 더 자세히 살펴보겠습니다. 이 반 천사에 악마 속성의 반이 들어있습니다.

본 글은 Zhang Xinxu의 MOOC 홈페이지에서 float 영상을 읽은 후 요약 및 일부 확대된 사용법입니다. 이 영상은 처음 읽으면 지루하지만, 주의 깊게 읽으면 더욱 지루해질 것입니다. . . . . . 그러나 함정을 만난 뒤 다시 읽으면 한 마디 한 마디가 귀한 양심 영상을 발견하게 된다. 더 이상 고민하지 말고 지금 시작해 보겠습니다.

1.float의 기원

float의 원래 디자인은 텍스트에 대한 감싸기 효과를 만드는 것이었습니다. 디자이너가 뭔가를 만들자고 했어요.

2.float 매개변수

float 속성에는 세 가지 매개변수가 있습니다.

left: 요소가 부동임을 나타냅니다. 왼쪽에.

　right: 요소가 오른쪽으로 떠 있음을 나타냅니다.

없음: 개체 는 부동하지 않고 표준 문서 흐름을 따릅니다.

3.효과 표시 (float: 왼쪽을 예로 들면, float: 오른쪽의 경우는 위치의 차이일 뿐입니다)

<style> p{
    height: 20px;}
    .d1{
        width: 50px;
        background: hsl(100,50%,80%);
    }
    .d2{float: left;
        width: 100px;
        background: hsl(150,50%,80%);
    }
    .d3{
        width: 250px;
        height: 100px;
        background: hsl(10,50%,80%);
    }
    .d4{float: left;
        width: 300px;
        background: hsl(250,50%,80%);
    }
    span{
        margin-right: 3px; 
        border-right: solid 1px #ccc;
        background-color: hsl(60,50%,80%);
    }
    .s3{
        float:left;
    }</style> <body> <p class="d1">p1</p><p class="d2">p2有float</p><p class="d3">p3</p><span class="s1">span1</span><span class="s2">span2</span><span class="s3">span3有float</span><p class="d4">p4有float</p><span class="s4">span4 </span></body>

로그인 후 복사

브라우저 너비가 충분하지 않은 경우:

详解CSS中float浮动

브라우저 너비가 충분히 긴 경우 :

详解CSS中float浮动

다음과 같은 결론을 내릴 수 있습니다.

플로팅 요소가 블록 요소인 경우, 그 다음 인접 요소(플로팅이 아님)는 블록 요소입니다. 플로팅 요소와 겹치고 플로팅 요소가 맨 위에 오게 됩니다. 다음 인접 요소가 인라인 요소 인 경우 부동 요소를 따릅니다.

플로팅된 요소가 인라인 요소인 경우 블록 요소인 경우 다음 인접 요소(플로팅 아님)는 이동하지 않지만 너비가 충분하지 않으면 겹쳐집니다. 다음 인접 요소가 인라인 요소인 경우 부동 요소를 따릅니다.

4.플로팅의 파괴성

플로팅으로 설정된 요소는 문서 흐름에서 벗어나 상위 요소의 높이가 "축소"됩니다.

아아아아

详解CSS中float浮动

아아아아

详解CSS中float浮动

5.플로트 포장

플로트가 없는 p입니다

详解CSS中float浮动

입니다. a p with float

详解CSS中float浮动

6. 공백을 제거하는 Float

이것은 이미 위의 코드와 결론에 나와 있습니다. 일반적인 문서 흐름에서는 기본적으로 두 개의 인라인 요소 사이와 상단과 하단 사이에 간격이 있습니다. 플로팅을 사용하면 이 간격을 없애 두 요소를 원활하게 결합할 수 있으며 상단과 하단 사이의 간격도 정리할 수 있습니다. .

详解CSS中float浮动

7.플로팅 임팩트 클리어

　7.1 사용클리어속성

a. <p style="clear:both;"></p>을 상위 태그의 마지막 하위 태그로 배치하는 것도 플로팅을 지우는 가장 간단한 방법이지만 권장되지는 않습니다.

아아앙

　　详解CSS中float浮动

　　b.after伪元素和zoom

　　after，就是指标签的最后一个子元素的后面。因此我们可以用CSS代码生成一个具有clear属性的元素

<style>.myp{
        border:3px dashed #ddd    }
    .myp:after{
        content: "";
        clear:both;
        display: block;    
    }</style><body><p class="myp">
    <p style="float:left">我设置了float属性</p></p></body>

로그인 후 복사

详解CSS中float浮动

但是ie6/7无法识别伪元素after，就得用zoom方式，例：

.myp{
        border:3px dashed #ddd;
　　　　　zoom:1
    }
　　7.2 
给父元素添加浮动，或者overflow:hidden,position:absolute等可以使元素BFC化的属性，下节单独探讨BFC的生成条件和布局规则，例：

로그인 후 복사

<style> 
    .myp{
        border:3px dashed #ddd;
        overflow: hidden;
    }</style> <body> <p class="myp">
    <p style="float:left">我设置了float属性</p></p></body>

로그인 후 복사

详解CSS中float浮动