談談前端中的浮動，絕對定位，相對定位
阿新 • • 發佈：2018-10-07
bubuko itl doctype 所有 -s ear htm 標準 向上
註:本文章是參考千鋒網學習視頻總結得出。
最近在學習一個前端項目，項目中多處用到了浮動和定位。為此，通過看查找資料和看學習視頻，從浮動、清除浮動、相對定位、絕對定位、總結等五個部分來談談我對浮動和定位的理解。
一、浮動
浮動的使用場景：一般是將豎起來的多個盒子進行橫向的排列。
浮動的負面作用：因為浮動元素脫離了標準文檔流，會導致父元素無法被撐開。示例如下：
1、 在body中定義2個盒子並設置盒子為右浮動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
border: red solid 2px;
}
.box1{
background-color: blue;
width: 100px;
height: 80px;
float: right;
}
.box2{
background-color: yellow;
width: 80px;
height: 60px;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子一</div>
<div class="box2">盒子二</div>
</div>
</body>
</html>
2、顯示效果（由於盒子一、二進行了右浮動，使其2個盒子脫離了標準文檔流，原來的大盒子就沒有內容來撐他（並沒有設置寬高），所以使得父盒子變成了一條紅色的線）
二、清除浮動
需用清除浮動解決上面第2點出現的問題。現介紹“最流行、最常用、可兼容所有瀏覽器”清除浮動的一種方法。在樣式文件中設置一個clear的全局屬性，在需要清除浮動的“父級元素”中加上clear屬性，即可清除浮動！
/*定義clear類，使用偽元素:after，並把clear類附給浮動元素的“父級元素”*/
.clear:after{display: block;clear: both;content: ".";visibility: hidden;height: 0;}
.clear{zoom: 1;}
顯示效果
三、相對定位
相對於原來的位置發生改變，並且保留原有的空間位置。
相對定位有2種值改變他的位置：top left
四、絕對定位
絕對定位相對於他有position屬性的父級元素進行定位，如果父級元素沒有position定位，那麽就找父級的父級，直到找到position定位為止，如果向上找不到position定位，那麽就以最外層的body進行定位，但絕對定位不會保留原有的空間位置。
絕對定位有四種值改變他的位置：top right bottom left
五、總結
為了使頁面做的絢麗生動，頁面中往往會多處用到浮動，所以可使用第二點中提到的清除浮動的方法。當在進行相對定位和絕對定位時，要給對應定位的盒子加上top left等屬性值，這樣能更好的看出相對定位和絕對定位的區別。
談談前端中的浮動，絕對定位，相對定位