CSS浮動-有解無憂

CSS浮動

傳統網頁布局的三種方式
- 網頁布局的本質——用來CSS來擺放盒子，把盒子擺放在相應的位置
- CSS提供了三種傳統的布局方式：
  - 普通流（標準流）
    - 所謂的標準流，就是標簽按照規定好默認方式排列
    - 塊級元素會獨占一行，從上向下排列
      - 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
    - 行內元素會按照順序，從左到右順序排列，碰到父元素的邊緣則自動換行
      - 常用元素：span、a、i、em等
  - 浮動
    - 浮動最典型的應用：可以讓多個塊級元素一行內排列顯示，
    - 網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動
    - float屬性用于創建浮動框，將其移動到一邊，直到左邊緣或者有邊緣觸及包含或者另一個浮動框的邊緣
    - ```
    選擇器{float：屬性值;}
```
  - 屬性值描述
    
    none 元素不浮動（默認值）
    
    left 元素向左浮動
    
    right 元素向右浮動
- 浮動特性
  - 浮動元素會脫離標準流
    
    脫離標準普通流的控制移動到指定的位置，俗稱脫標
    
    浮動的盒子不在保留原先的位置
  - 浮動的元素會一行內顯示并且元素頂部對齊
    
    如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示并且頂端對齊排列
    
    【注意】浮動元素是相互貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊
  - 浮動的元素會具有行內塊元素的特性
  - 浮動元素和標準流父級搭配使用
    
    為了約束浮動元素位置，我們網頁布局一般采取的策略是：
    
    先用標準流的父元素排列上下位置，之后內部元素采取浮動排列左右位置，符合網頁布局第一標準

屬性值	描述
none	元素不浮動（默認值）
left	元素向左浮動
right	元素向右浮動

浮動案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.box{
				width: 1200px;
				height: 460px;
				background-color: gray;
				margin: 0 auto;
			}
			.left{
				float: left;
				width: 230px;
				height: 460px;
				background-color: aqua;
			}
			.right{
				width: 970px;
				height: 460px;
				background-color: antiquewhite;
				float: left;
			}
			.box1{
				width: 1226px;
				height: 285px;
				background-color: #808080;
				margin: 0 auto;
			}
			.box1 li{
				width: 296px;
				height: 285px;
				background-color: purple;
				float: left;
			}
		</style>
	</head>
	<body>
		<div >
			<div >left</div>
			<div >right</div>
		</div>
		<ol >
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</body>
</html>

清除浮動
- 清除浮動的本質是清除浮動元素造成的影響
- 如果父盒子本身有高度，則不需要清除浮動
- 清除浮動之后，父級就會根據浮動的自盒子自動檢測高度，父級有了高度，就不會影響下面的標準流
- ```
選擇器{
clear：屬性值；
}
```
  - 屬性值描述
    
    left 不允許左側右浮動元素
    
    right 不允許右側右浮動元素
    
    both 同時清除左右兩側的浮動元素
- 清除浮動的方法
  - 額外標簽法也稱為隔墻法，是W3C推薦的做法
    - 額外標簽法會在浮動元素的末尾添加一個空標簽，例如：<div style="clear:both"> </div>
    - 【注意】新增的標簽必須是塊元素
  - 父級添加overflow屬性
    - 將值設定為hidden、auto或者scroll
    - 優點：代碼簡潔
    - 缺點：無法顯示溢位的部分
  - 父級添加：after偽屬性
    - ：after方式是額外標簽的升級版，也是給父級添加
    - ```
    .clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    .clearfix{
    /**IE6\7專有/
    *zoom：1；
    }
```
- 父級添加雙偽屬性
  - ```
  .clearfix:before，
  .clearfix:after{
  content:"";
  display:table;
  
  }
  .clearfix:after{
  clear：both；
  
  }
  .clearfix{
  /**IE6\7專有/
  *zoom：1；
  }
```

總結
- 為什么要清楚浮動
  - 父級沒有高度
  - 子盒子浮動了
  - 影響下面布局了

屬性值	描述
left	不允許左側右浮動元素
right	不允許右側右浮動元素
both	同時清除左右兩側的浮動元素

清除浮動的方法	優點	缺點
額外標簽法	通俗易懂，書寫方便	添加去多無意義的標簽
父級overflow：hidden;	書寫簡單	溢位隱藏
父級：after偽元素	結構語意化正確	兼容性問題
父級雙偽元素	結構語意話正確	兼容性問題

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/106432.html

標籤：Html/Css

上一篇：第一天來到博客

下一篇：CSS基本選擇器是什么？基本選擇器是如何作業