Heim > Artikel > Web-Frontend > Eine ausführliche Einführung in das Floating-in-CSS-Lernen
Eine ausführliche Einführung in das Floating-in-CSS-Lernen
- 零下一度Original
- 2017-06-30 10:35:541439Durchsuche
Aus dem Artikel CSS Study Notes 05 Anzeigeattribut wissen wir, dass div ein Blockelement ist und eine Zeile für sich einnimmt, auch wenn die Breite des div sehr groß ist klein, wie folgt
Durch Anwenden des Inline-Attributs des Anzeigeattributs kann das Div eine Zeile mit dem Div teilen Gibt es außer dieser Methode eine andere Möglichkeit, dies zu erreichen? Die Antwort lautet: Ja, das ist die schwebende Funktion von CSS, die im Folgenden vorgestellt wird. Wer also schwebt und wen bewegt sich? Lesen Sie weiter und Sie werden die Antwort bald erfahren. Das Floating des
-Elements bedeutet, dass das Element mit dem Floating-Attributsatz sich von der Kontrolle des Standarddokumentflusses löst und über dem Standardfluss schwebt. Obwohl das Element nach dem Floaten vom Standardfluss getrennt ist, wirkt es sich dennoch auf das Layout des Standardflusses aus.
In CSS wird Float über das Float-Attribut definiert. Das grundlegende Syntaxformat von lautet wie folgt: selector {float: attribute value;}, der Standardwert ist none (. nicht schwebend) Darüber hinaus bedeutet links schwebend nach links, was als nach links schwebend und nach links angeordnet angesehen werden kann, rechts bedeutet nach rechts schwebend und natürlich nach rechts angeordnet.
Nun setzen wir float auf div2 und sehen, welcher Effekt auftritt
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>Das obige ist der detaillierte Inhalt vonEine ausführliche Einführung in das Floating-in-CSS-Lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!