CSS 학습의 플로팅에 대한 자세한 소개
- 零下一度원래의
- 2017-06-30 10:35:541483검색
기사 CSS Study Notes 05 표시 속성에서 우리는 div가 블록 요소이며 다음과 같이 div의 너비가 작더라도 자체적으로 한 줄을 차지한다는 것을 알고 있습니다.
표시 속성의 인라인 적용 속성을 사용하면 div가 div와 행을 공유할 수 있습니다. 이 방법 외에 이 효과를 얻을 수 있는 다른 방법이 있습니까? 대답은 '예'입니다. 아래에서 소개할 CSS의 기능. 플로팅(Floating)은 말 그대로 떠서 움직이는 것을 의미합니다. 그러면 누가 떠 있고 누가 움직이는가? 계속 읽어보시면 곧 답을 찾으실 수 있을 것입니다.
요소의 부동은 부동 속성이 설정된 요소가 표준 문서 흐름의 제어에서 벗어나 표준 흐름 위에 떠 있다는 것을 의미합니다. 요소가 부동된 후에는 표준 흐름에서 분리되지만 여전히 표준 흐름의 레이아웃에 영향을 미칩니다.
CSS에서 float는 float 속성을 통해 정의됩니다. 기본 구문 형식은 다음과 같습니다: selector {float: 속성 값;}, 기본값은 없음(플로팅 아님)이고 왼쪽은 왼쪽을 나타내는 데 사용됩니다. Floating, 이는 이해가 됩니다. Floating 후 왼쪽으로 배열한다는 것은 Right가 오른쪽으로 Floating한다는 뜻이고 당연히 오른쪽으로 배열된다는 의미입니다.
이제 float를 div2로 설정하고 어떤 효과가 나타나는지 살펴보겠습니다
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>浮动</title> 6 <style type="text/css"> 7 .div1 {background-color: red; height: 50px; width: 400px;} 8 .div2 {background-color: blue; height: 100px; width: 100px; float: left;} 9 .div3 {background-color: gray; height: 150px; width: 400px;}10 .div4 {background-color: green; height: 30px; width: 600px;}11 </style>12 </head>13 <body>14 <div class="div1">div1</div>15 <div class="div2">div2</div>16 <div class="div3">这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3</div>17 <div class="div4">div4</div>18 </body>19 </html>
这时候div2的位置并没有变化，而div3向上移动了，与div2共用一行，相当于div2不占用页面的空间了，不过影响了div3中的文字布局。从这里也可以清楚的看出，是浮动的对象div2先漂浮起来，然后后面的对象div3会向它原来的位置动起来，这也解答了刚开始提出的问题。
浮动是将块元素独占一行的行为取消，将这个块从原来的文档流模式中，可以理解为它飘起来了，它原来的地方就空出来了，它的内容分离出来，这样它后面的对象就当它不存在了。
接下来给div3也设置一下浮动，会有什么意想不到的结果出现吗？
这时，由于div2与div3同时设置了浮动，所以都脱离了标准流，因此div4向上移动与div1组成了一个新的标准流，而浮动的元素是“浮”在标准流的元素之上的，所以div4被div2，div3挡住了一部分。
从上面的现象可以看出，给div3设置浮动之后，div3是紧接着跟在div2后面的，但是div2也是设置了浮动的，可是div2并没有跟在div1后面，这里可以得出一个结论：
浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐（也就是紧挨着上一个元素的后面），如果一行放不下，A元素则会被挤到下一行；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。
假如把div4也设置成左浮动，效果如下
我们来一起分析一下，首先看div4，它的上一个元素div3设置了左浮动，所以div4的顶部与div3的顶部对齐，接着看div3，div3的上一个元素div2也设置了左浮动，所以div3的顶部与div2的顶部对其，现在看div2，div2的上一个元素是div1，但是div1并没有设置浮动属性，属于标准流，所以div2的顶部与div1的底部对齐。
或许有人会想如果要让div4独占一行，该怎么办？这就需要用到CSS的清除浮动，清除浮动的关键字是clear，它有如下几个值
再来看div2设置左浮动的现象
因为div3的上一个元素div2设置了左浮动，所以div3占据了元素div2的空间，因为div3的宽高比div2的宽高都大，所以div3被div2挡住了一部分，我们知道标准流中的元素都是没有设置浮动属性的，所以需要清除掉div2元素浮动给div3造成的影响，由于div2是左浮动，因此为div3清除左边的浮动
现象与原来没有设置浮动一样，好，现在div2与div3同时设置左浮动，我想应该可以比较容易的知道如何让div4独占一行了。
清除浮动其他属性值可以自行类推并测试出来。有了上面的基础，我们就可以做出以下比较常见的网页布局。
1 <!DOCTYPE html> 2
<html lang="en"> 3 <head> 4
<meta charset="UTF-8"> 5
<title>常见布局</title> 6
<style type="text/css"> 7
.head {background-color: red; height: 50px; width: 500px;} 8
.sidebar {background-color: blue; height: 200px; width: 100px; float: left;} 9
.main {background-color: gray; height: 200px; width: 400px; float: left;}10
.foot {background-color: green; height: 30px; width: 500px; clear: left;}11
</style>12 </head>13 <body>14 <div class="head">head</div>15
<div class="sidebar">sidebar</div>16
<div class="main">main</div>17
<div class="foot">foot</div>18 </body>19 </html>위 내용은 CSS 학습의 플로팅에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!