CSS浮動（float）

plus21n發表於2020-11-15
CSS

什麼是 CSS Float（浮動）？

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

Float（浮動），往往是用於影像，但它在佈局時一樣非常有用。

元素怎樣浮動

元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。

一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果影像是右浮動，下面的文字流將環繞在它左邊：


img
{
    float:right;
}

彼此相鄰的浮動元素

把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。

在這裡，我們對圖片使用 float 屬性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>test</title> 
<style>
    .image{
	    float:left;
	    width:110px;
	    height:90p；
    }
    img{
        width: 100px;
        height: 70px;
    }
</style>
</head>

<body>
<p>asdfghjkl</p>
<img class="image" src="flower.jpg">
<img class="image" src="flower.jpg">
<img class="image" src="flower.jpg">
</body>
</html>

效果圖為
在這裡插入圖片描述

清除浮動的四種方法

  1. 給浮動的元素的祖先元素加上高度
    如果一個元素要浮動,那麼它的祖先元素一定要有高度，有高度的盒子才能關住浮動，只要浮動在一個有高度的盒子中,那麼這個浮動就不會影響後面的浮動元素.所以就是清除浮動帶來的影響了。
  <div>   → 設定height
      <p></p>
      <p></p>
      <p></p>
  </div>
 
  <div>   → 設定height
      <p></p>
      <p></p>
      <p></p>
  </div>
  1. clear:both；
    clear就是清除,both指的是左浮動,右浮動都要清除。

.text_line
{
    clear:both;
}

但是使用這個方法，margin就會失效

  1. 隔牆法與內牆法
    隔牆法：在兩部分浮動元素中間，建一個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。牆用自己的身體當做了間隙。
   <div>
       <p></p>
       <p></p>
       <p></p>
   </div>
 
   <div class="wall"></div>
 
   <div>
       <p></p>
       <p></p>
       <p></p>
   </div>
 內牆法：將牆修在了父類裡面。

   <div>
       <p></p>
       <p></p>
       <p></p>
       <div class="wall"></div>
   </div>
 
   <div>
       <p></p>
       <p></p>
       <p></p>
   </div>
  1. overflow:hidden;
    overflow:hidden;的本意是將超出父類的部分隱藏，就是將所有溢位盒子的內容，隱藏掉。

相關文章