CSS浮動與清浮動

時間  2020-06-22
標籤 css 浮動 欄目 CSS 简体版
原文   原文鏈接

浮動 （ float css屬性）

　　float ： left right
javascript

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.css

http://www.w3schools.com/css/css_float.asphtml

浮動可讓元素在容器中儘可能向左或者向右push移動， 這樣其餘元素會圍繞浮動元素，java

所謂的其餘元素就是浮動元素後面的非浮動元素， 浮動影響的對象以後的元素，這個前後是指元素標籤位置的前後次序；並非展現出來的次序，因爲浮動的存在，展現出來的次序，能夠不是實際元素標籤的順序，例如 有這種代碼 （div[float:left] div[float:right] div）， 最後一個div的內容顯示在 第一個 和 第二個div之間， 給人眼錯覺好像是實際上的第三個div看起來是第二個。jquery

The elements after the floating element will flow around it.ajax

The elements before the floating element will not be affected.api

浮動最初用做 圖片周邊 有文字圍繞效果，後來廣泛爲佈局使用。app

 

清浮動需求

float元素其實是脫離了HTML文檔流，浮動元素的高度是不被外層容器元素計算的，ide

若是浮動元素僅僅被後續的元素圍繞了高度的一半，這個時候添加一個新div塊， 要求這個新塊可以 在浮動元素的下方一行顯示，佈局

按照浮動的實現效果， 新添加的 div塊爲了實現圍繞效果， 仍是會從浮動元素的一半開始顯示新添加的div。

 

不少佈局狀況，要求多個塊可以按照float的push排列，同時又可以讓float元素像正常的文檔元素同樣，能夠在文檔流中被計算高度。

要是實現這個效果，須要引入清浮動  clear。

 

清浮動理解

clear : left right both

清浮動，就是把以前元素的浮動狀態刪除，按照正常文檔流元素高度來解析以前元素。

w3.org官方的解釋是：「元素盒子的邊不能和前面的浮動元素相鄰」。

The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.

http://zzstudy.offcn.com/archives/14575 這個解釋的有點意思， float元素，能夠理解爲邊框圍繞， 則元素盒子的邊必然與浮動元素相鄰，清浮動，就是要破除這種相鄰， 跟浮動元素不相鄰，換行顯示。

 

left -- 是指清浮動元素的 左邊框 不能與前面的 浮動元素的邊相鄰。

right -- 是指清浮動元素的 右邊框 不能與前面的 浮動元素的邊相鄰。

both -- 是指清浮動元素的 左邊框 和 右邊框 不能與前面的 浮動元素的邊相鄰。

註釋： 這裏的左右邊是指 清浮動 元素 的 左右邊框，  不是指 此元素標籤位置 的 左邊（前邊） 和 右邊（後邊）

記住全部清浮動元素， 要清理的浮動屬性， 是針對此元素標籤位置前面的浮動標籤元素。

 

上面說的不能相鄰是整體上說法，可是怎樣不能相鄰，看w3c本身的即便最透徹：

http://www.w3.org/wiki/CSS/Properties/clear

  • left
    Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.


  • right
    Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.


    • both
      Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

 

W3C清浮動例子

 下面網站提供的一個清浮動，分兩行顯示圖片，每一行都向左對齊。

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear 

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}

.text_line {
    clear: left;
    margin-bottom: 2px;
}
</style>
</head>
<body>

<h3>Image Gallery</h3>
<p>Try to resize the browser-window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">

<h3 class="text_line">Second row</h3>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<div>iiiiiii</div>
</body>
</html>
 

自研clear清左右例子

前面設置了兩個浮動塊div，左右浮動，  第三個div設置clear各類值（left right both none）， 以觀察各類狀況下的清浮動狀況。

同時爲了能看出，清左 和 清右 的效果， 將第一個浮動div 設置高度爲 100px， 第二個浮動div高度設置爲 200px。

建議親自運行下， 可容易看出 clear left 和 rigt 效果。

<html>
<head>
        <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
        <style>
.clear {
     clear: both;
}
        </style>
</head>
<body>

<h1>left + left => clear none</h1>
<div style="float:left;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:left;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:none">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>left + left => clear left</h1>
<div style="float:left;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:left;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:left">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>rihgt + right => clear none</h1>
<div style="float:right;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:right;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:none">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>rihgt + right => clear right</h1>
<div style="float:right;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:right;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:right">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>left + right => clear none</h1>
<div style="float:left;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:right;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:none">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>left + right => clear left</h1>
<div style="float:left;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:right;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:left">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>left + right => clear right</h1>
<div style="float:left;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:right;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:right">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>


<h1>left + right => clear both</h1>
<div style="float:left;width:200px;height:100px;background:green">這個是第1列，</div>
<div style="float:right;width:400px;height:200px;background:grey">這個是第2列，</div>
<div style="text-align:left; background:yellow; clear:both">這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。這個是第3列。</div>
<div class="clear"></div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程