집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 플로팅 방법은 무엇입니까?

CSS 플로팅 방법은 무엇입니까?

青灯夜游원래의: 2021-04-30 13:58:544260검색

CSS에서는 float 속성을 사용하고 "float:left" 또는 "float:right" 스타일을 float 요소로 설정할 수 있습니다. 요소가 부동되면 나란히 배치될 수 있으며 원래 블록 수준 요소인지 인라인 요소인지에 관계없이 너비와 높이를 설정할 수 있습니다.

CSS 플로팅 방법은 무엇입니까?

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

floating float의 원래 목적은 텍스트 줄 바꿈 효과를 얻는 것입니다.

Floating 구문: float:left/right;

float:left 또는 float:right 또는 둘 다를 사용하면 float가 생성됩니다.

플로팅 속성

플로팅은 CSS 레이아웃에 가장 일반적으로 사용되는 속성입니다.

이제 너비와 높이가 각각 설정된 두 개의 div가 있습니다.

이 때 이 두 div에 float: left;와 같은 부동 속성을 추가하면 효과는 다음과 같습니다. float: left;，效果如下：

这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。

浮动想学好，一定要知道三个性质。接下来讲一讲。

性质1：浮动的元素脱标

脱标即脱离标准流。我们来看几个例子。

证明1：

上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个dc6dce4a544fdca2df29d5ac0ea9906b标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个dc6dce4a544fdca2df29d5ac0ea9906b还在自己的层面上遵从标准流进行排列。

证明2：

上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。

所以能够证明一件事：一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。所有标签，浮动之后，已经不区分行内、块级了。

性质2：浮动的元素互相贴靠

我们来看一个例子就明白了。

我们给三个div均设置了float: left;属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：

上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
如果没有足够的空间靠着1号大哥，3号自己去贴左墙。

不过3号自己去贴墙的时候，注意：

上图显示，3号贴左墙的时候，并不会往1号里面挤。

同样，float还有一个属性值是right，这个和属性值left

이것은 부동 효과를 얻습니다. . 이때 두 요소는 나란히 있으며 두 요소 모두 너비와 높이를 설정할 수 있습니다(이전 단락의 표준 흐름에서는 이를 달성할 수 없습니다).

플로팅을 잘 배우고 싶다면 세 가지 속성을 알아야 합니다. 다음에 그것에 대해 이야기합시다.

속성 1: 플로팅 요소가 표준을 벗어남 오프표준은 표준 흐름을 벗어나는 것을 의미합니다. 몇 가지 예를 살펴보겠습니다.

증명 1:

위 그림에서는 기본적으로 두 개의 div 태그가 서로 위에 배열되어 있습니다. 이제 float 속성으로 인해 위 그림의 첫 번째 dc6dce4a544fdca2df29d5ac0ea9906b 태그가 떠 있는 것처럼 나타나므로 이 태그는 다른 수준에 배열됩니다. 두 번째 dc6dce4a544fdca2df29d5ac0ea9906b도 자체 수준의 표준 흐름에 따라 배열됩니다.

증명 2:

위 그림에서 스팬 태그의 너비와 높이는 인라인 요소이므로 표준 흐름에서 설정할 수 없습니다. 그러나 일단 부동으로 설정되면 블록 수준 요소로 변환하지 않고도 너비와 높이를 설정할 수 있습니다.

그래서 한 가지를 증명할 수 있습니다.

요소가 부동되면 나란히 있을 수 있고 너비와 높이를 설정할 수 있습니다. 어쨌든 div 또는 범위로 밝혀졌습니다.

모든 라벨은 플로팅 후에 더 이상 인라인 수준과 블록 수준을 구분하지 않습니다.

속성 2: 플로팅 요소가 서로 가깝습니다

이해하기 위해 예를 살펴보겠습니다.

세 개의 div 각각에 대해 float: left; 속성을 설정한 후 너비와 높이를 설정합니다. 브라우저 창의 크기를 변경하면 div의 스냅 효과를 볼 수 있습니다:

🎜🎜위 사진을 보면 3번이 공간이 충분하다면 2번에 가까워질 것 같습니다. 공간이 부족하면 1번 형에게 기대게 된다.
1번 빅브라더에게 기댈 공간이 부족하면 3번 빅브라더가 혼자서 왼쪽 벽에 붙게 됩니다. 🎜🎜단, 3일 담벼락에 올리실 때 주의사항: 🎜🎜

🎜🎜위 사진을 보면 3번을 왼쪽 벽에 붙였을 때 1번에 끼어 들어가지 않는 모습을 볼 수 있습니다. 🎜🎜마찬가지로 float에는 left 속성 값과 대칭인 right 속성 값도 있습니다. 🎜🎜속성 3: 플로팅 요소에는 "단어 둘레" 효과가 있습니다.🎜🎜사진을 보시면 이해하실 것입니다. div는 부동으로 두고 p는 부동으로 두지 않습니다. 🎜🎜🎜🎜🎜위 그림에서 우리는 다음을 발견했습니다: 🎜div는 p를 차단하지만 p🎜의 텍스트를 차단하지 않아 "단어 둘러싸기" 효과를 형성합니다. 🎜🎜요약: 🎜표준 스트림의 텍스트는 부동 상자로 가려지지 않습니다🎜. (말은 물과 같습니다) 🎜🎜떠다니는 것에 대해 한 가지 강조해야 할 점은 초기 단계에서 원칙을 따라야 한다는 것입니다. 🎜모두가 함께 떠다니는 것은 절대 아닙니다. 수레. 🎜🎜🎜속성 4: Shrink 🎜🎜Shrink: 너비가 설정되지 않은 경우 플로팅 요소는 자동으로 콘텐츠 너비에 맞춰 축소됩니다(이는 인라인 요소와 매우 유사합니다). 🎜🎜예: 🎜🎜🎜🎜🎜위 그림에서 div 자체는 너비가 설정되지 않은 경우 전체 행을 차지하지만 div를 부동으로 설정하면 너비가 전체 행을 차지합니다. 줄어들 것이다🎜

플로팅 보충(홈페이지 제작시 주의)

위 그림과 같이 para1, para2를 float로 설정하면 div의 아들들이 됩니다. 이때 para1+para2의 너비는 div의 너비보다 작습니다. 효과는 위의 그림에 나와 있습니다. 그러나 para1+para2의 너비가 div의 너비보다 크게 설정되면 para2가 떨어지는 것을 알 수 있습니다.

(학습 동영상 공유: css 동영상 튜토리얼)

과제 할당

할당 과제, 요구사항 다음 효과를 얻으려면:

위 효과를 얻으려면 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
/*居中。这个语句的意思是：居中：*/
margin: 0 auto;
}
.header .logo{
float: left;
width: 277px;
height: 103px;
background-color: red;
}
.header .language{
float: right;
width: 137px;
height: 49px;
background-color: green;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 679px;
height: 46px;
background-color: green;
}

.content{
width: 970px;
height: 435px;
/*居中，这个语句今天没讲，你照抄，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
.content .banner{
float: left;
width: 310px;
height: 435px;
background-color: gold;
margin-right: 10px;
}
.content .rightPart{
float: left;
width: 650px;
height: 435px;
}
.content .rightPart .main{
width: 650px;
height: 400px;
margin-bottom: 10px;
}
.content .rightPart .links{
width: 650px;
height: 25px;
background-color: blue;
}
.content .rightPart .main .news{
float: left;
width: 450px;
height: 400px;
}
.content .rightPart .main .hotpic{
float: left;
width: 190px;
height: 400px;
background-color: purple;
margin-left: 10px;
}
.content .rightPart .main .news .news1{
width: 450px;
height: 240px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news2{
width: 450px;
height: 110px;
background-color: skyblue;
margin-bottom: 10px;
}
.content .rightPart .main .news .news3{
width: 450px;
height: 30px;
background-color: skyblue;
}
.footer{
width: 970px;
height: 35px;
background-color: pink;
/*没学，就是居中：*/
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<div>logo</div>
<div>语言选择</div>
<div>导航条</div>
</div>

<!-- 主要内容 -->
<div>
<div>大广告</div>
<div>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div></div>
</div>
<div></div>
</div>
</div>

<!-- 页尾 -->
<div></div>
</body>
</html>

사실 이 페이지의 레이아웃은 다음 웹사이트입니다:

Floatingclear

여기서 말하는 클리어 플로팅은 플로트 사이의 충격을 제거하는 것을 말합니다.

머리말

위의 예를 통해 이번 예의 웹페이지는 플로팅을 통해 나란히 배열되어 있음을 알 수 있었습니다.

예를 들어 웹페이지는 머리글, 내용, 바닥글의 세 부분으로 구성됩니다. 콘텐츠 부분을 예로 들어보겠습니다. 콘텐츠의 아들을 부동으로 설정했지만 이 아들은 완전히 새로운 표준 스트림이므로 아들의 아들은 여전히 표준 스트림에 있습니다.

플로팅을 배우는 첫날부터 플로팅이 시작되면 클리어해야 한다는 점을 이해해야 합니다. 먼저 실험을 해보겠습니다.

다음 예에는 두 개의 블록 수준 요소 div가 있으며 각 div에는 li이 있습니다.

위 예는 매우 간단합니다. . 하지만 내부의 25edfb22a4f469ecb59f1190150159c6 태그에 float를 추가하면 효과는 다음과 같습니다. 25edfb22a4f469ecb59f1190150159c6标签加浮动。效果却成了下面这个样子：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{

}
li{
float: left;
width: 100px;
height: 20px;
background-color: pink;


}
</style>
</head>
<body>
<div>
<ul>
<li>生命壹号1</li>
<li>生命壹号2</li>
<li>生命壹号3</li>
<li>生命壹号4</li>
</ul>
</div>
<div>
<ul>
<li>许嵩1</li>
<li>许嵩2</li>
<li>许嵩3</li>
<li>许嵩4</li>
</ul>
</div>
</body>
</html>

效果如下：

上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。

这便引出我们要讲的：清除浮动的第一种方式。
那该怎么解决呢？

方法1：给浮动元素的祖先元素加高度

造成前言中这个现象的根本原因是：li的父亲div没有设置高度，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。

撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。

好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：

给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：

总结：

如果一个元素要浮动，那么它的祖先元素一定要有高度。

有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）

只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

方法2：clear:both;

网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。

那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

这个时候，我们可以使用clear:both;

코드는 다음과 같습니다.

clear:both;

효과는 다음과 같습니다. 🎜

🎜🎜위 그림에서 우리는 두 번째 그룹의 첫 번째 리가 첫 번째 그룹의 마지막 리에 가깝다는 것을 발견했습니다. li는 두 행으로 나뉩니다). 🎜🎜이것은 우리가 이야기할 내용, 즉 플로트를 제거하는 첫 번째 방법으로 이어집니다.
어떻게 해결하나요? 🎜

방법 1: 플로팅 요소의 조상 요소에 높이 추가 🎜🎜서문에서 이 현상의 근본 원인은 다음과 같습니다. li의 아버지 div에는 높이 설정이 없습니다. 따라서 두 div 모두 높이가 0px이 됩니다(웹페이지의 검사 요소를 통해 이를 확인할 수 있습니다). div의 높이는 0이므로 자체 부동 하위 항목에 대한 컨테이너를 지원할 수 없습니다. 🎜🎜컨테이너를 지탱할 수 없어 아이들이 컨테이너 안에서 올바르게 떠오를 수 없습니다. 🎜🎜자, 이제 이 div의 높이를 설정하더라도 div의 높이가 자식의 키보다 작으면 비정상적인 현상이 발생합니다: 🎜🎜🎜🎜div에 올바르고 적절한 높이를 설정합니다(적어도 높이가 다음보다 큰지 확인하세요). 아들의 키), 올바른 현상을 볼 수 있습니다: 🎜🎜🎜🎜 요약:🎜🎜요소가 부동하려면 해당 상위 요소에 높이가 있어야 합니다. 🎜🎜높이가 높은 상자만이 플로트를 닫을 수 있습니다. (경험해본 사람들의 이 문구를 기억하세요) 🎜🎜높이가 있는 상자에 떠 있는 한 이 플로트는 후속 플로팅 요소에 영향을 미치지 않습니다. 그래서 부유의 영향을 제거하는 것입니다. 🎜🎜🎜🎜🎜

방법 2:clear:both;🎜🎜웹페이지 제작에서는 높이가 거의 나오지 않습니다. 왜? 콘텐츠로 부스트할 수 있으니까요! 즉, 방금 설명한 방법 1은 업무상 거의 사용되지 않습니다. 🎜🎜그럼 높이를 쓰지 않고 플로트를 지울 수 있을까요? 또한 수레가 서로 영향을 미치지 않도록 하시겠습니까? 🎜🎜이때 clear:both; 속성을 사용할 수 있습니다. 다음과 같습니다: 🎜🎜🎜🎜