說說浮動那些事兒
阿新 • • 發佈：2021-11-22
什麼是浮動
CSS 的 Float(浮動)，使元素向左或向右移動，在其周圍的元素也會重新排列。
Float(浮動)，往往是用於影象，但它在（盒子）佈局時一樣非常有用。
元素怎樣浮動
- 元素的水平方向浮動，意味著元素只能左右移動而不能上下移動；
- 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止；
- 浮動元素之後的元素將圍繞它；
- 浮動元素之前的元素將不會受到影響。
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
clear–清除浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 第一個div盒子 */ .container{ width: 400px; /* display: inline-block ; */ border: 1px solid grey; } .left{ background-color: rgb(24,18,18); /* display: inline-block ; */ height: 400px; width: 200px; float: left; } .right{ background-color:red; /* display: inline-block; */ height: 400px; width: 200px; float: right; } .container2{ width:800px; height:200px; background-color: blue; /*藍色是最下面一層*/ } /*清除浮動第一步，定義一個選擇器，名字叫clearfix */ .clearfix::after{ content:""; display: block; clear:both; } </style> </head> <body> <!-- 清除浮動的第二步,在父級元素上加樣式 --> <div class="container clearfix"> <!-- 將類選擇器新增到clear --> <div class="left">left</div> <div class="right">right</div> </div> <div class="container2"></div> </body> </html>