>  기사  >  웹 프론트엔드  >  부동 소수점은 CSS3에서 위치를 차지합니까?

부동 소수점은 CSS3에서 위치를 차지합니까?

青灯夜游
青灯夜游원래의
2021-12-16 11:18:542616검색

Floating은 CSS3에서 위치를 차지합니다. 플로팅 요소는 표준 문서 흐름에서 벗어날 수 있으며 블록 수준 요소 및 인라인 요소의 제한을 없앨 수 있지만 텍스트 흐름에서 벗어나지 않으므로 여전히 위치를 차지하고 다른 텍스트 내용은 계속됩니다. 순서대로 정리하도록 하겠습니다.

부동 소수점은 CSS3에서 위치를 차지합니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

Floating은 CSS3에서 위치를 차지합니다.

플로팅 요소의 특징:

1. 플로팅 요소는 표준 문서 흐름에서 벗어나 블록 수준 요소와 인라인 요소의 제한을 제거합니다.

2. 폭이 부족하면 자동으로 줄 바꿈이 발생합니다

3. 플로팅 요소는 표준 문서 흐름에서 분리되지만 텍스트 흐름에서는 분리되지 않고 둘러싸이는 효과가 있습니다. 단어

float float 다음에 position:absolute문서 흐름에서 벗어나는 기능도 있지만 float가 문서 흐름에서 분리되더라도 여전히 위치를 차지하며 기타 텍스트 콘텐츠는 계속해서 순서대로 정렬됩니다. 모든 요소에 대해 부동 소수점을 설정하면 다음과 같은 몇 가지 p가 겹치지 않고 순차적으로 정렬되는 것을 볼 수 있습니다. display:none 및 visible:hidden을 설정한 효과를 참고할 수 있습니다. position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动,你会看到这几个p并不会重叠,而是会顺序排列。可以参考设置display:none,跟visible:hidden的效果。

其他盒子看不见被float的元素,但是其他盒子里的文本看得见

float浮动:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float和absolute区别</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .first {
            width: 150px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: pink;
            border: 10px solid red;    /*增加了边框*/
        }
        .second {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            float: left;      /*只设置一个浮动*/
        }
        .third{
            width: 50px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: green;
        }
    </style>
</head>

<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
</body>
</html>

将第27行设置改成position:absolute;如下图

 将第27行设置改成position:absolute;加上left:0

다른 상자에서는 부동 요소를 볼 수 없지만 다른 상자의 텍스트는 볼 수 있습니다

float float:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float和absolute区别</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .first {
            width: 150px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: pink;
            border: 10px solid red;    /*增加了边框*/
        }
        .second {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            position: absolute;
            left:0;
            opacity: 0.8
            /*float: left;*/

        }
        .third{
            width: 50px;
            height: 110px;
            float: left;
            display: inline-block;
            background: green;
            /*position: absolute;*/
        }
    </style>
</head>

<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
</body>
</html>

가 첫 번째가 됩니다. 27번째 줄의 설정을 아래와 같이 position:absolute;로 변경하세요

27번째 줄의 설정을 아래와 같이 position:absolute; + left:0;로 변경합니다


예 3. 문서 외부 흐름 비교

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{width:500px;height:500px;border: 5px solid green;}
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float:left;    /*左浮动*/

        }
        .second {
            width: 150px;
            height: 100px;
            border: 3px solid blue;
            
        }
        .third{
            width: 110px;
            height: 100px;
            border: 3px solid grey;
            float:left;    /*左浮动*/
        }
    </style>
</head>
 
<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
 <div>我是文字</div>
</body>

절대값은 문서 외부 흐름 우선순위

부동 분석

rrreee

렌더링:

                                                                                                       ery IN DREECH

두 번째 요소에는 파란색 테두리가 있습니다 세 번째 요소에는 회색 테두리가 있습니다. 왼쪽으로 떠 있습니다.

    참고: 플로팅은 문서 흐름에서 벗어나는 것을 의미합니다. 이름에서 알 수 있듯이, 부동은 부동 요소 위에 요소를 부동하는 것과 같습니다(비부동 요소가 지구를 나타내는 것처럼 부동은 하늘에 떠 있는 흰 구름과 동일하며 더 높은 높이에서 지구를 내려다보고 있습니다). 아래를 보면 땅이 흰 구름으로 덮여있습니다. 흰 구름만 보이고 땅은 보이지 않습니다.) 사진을 보면 파란색 테두리가 빨간색으로 덮여 있는 것을 볼 수 있습니다. 이상한 점은 플로팅이 없다는 것입니다.이를 통해 문서 흐름에서 벗어난 플로트와 절대의 차이점을 알 수 있습니다.
  • 이것을 보면 왜 세 번째 요소의 회색 테두리가 빨간색 상자 위가 아닌 중앙에 있는지 궁금할 것입니다.

  • 답변: 두 번째 요소는 부동 상태가 아닙니다. 세 번째 요소는 두 번째 요소의 순서와 위치에 따라 부동 상태가 됩니다(부동이 설정되지 않은 경우). 위에 떠있음
  • 플로팅과 위치 지정의 차이점:

플로팅도 원래 위치를 차지합니다

위치 지정은 문서 흐름에서 벗어나 원래 위치를 차지하지 않습니다

있는 경우 세 요소가 모두 부동으로 설정되면 한 행에 나란히 정렬됩니다. 문제는 부모 요소의 높이(너비와 높이가 설정되지 않은 경우)가 축소되고 테두리가 병합된다는 것입니다. 해결책은 플로트를 제거하는 것입니다.

🎜두 번째 요소에 너비와 높이가 설정된 경우 세 번째 요소는 너비와 높이 외부에 떠 있습니다. 🎜🎜🎜플로팅 플로트의 원래 기능은 텍스트 줄바꿈 효과를 얻는 것입니다🎜🎜🎜 (동영상 공유 학습: 🎜css 동영상 튜토리얼🎜)🎜

위 내용은 부동 소수점은 CSS3에서 위치를 차지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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