CSS的position定位和float浮動(dòng)詳解
我要評(píng)論一、position定位
（一）：position的屬性
1.absolute：生成絕對(duì)定位的元素，相對(duì)于最近一級(jí)定位不是static的父元素來(lái)進(jìn)行定位；
2.relative：生成相對(duì)定位的元素，相對(duì)于其所在普通的文檔流位置進(jìn)行定位；
3.static:默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中;
4.fixed:老IE不支持，和absolute一致，相對(duì)于窗口進(jìn)行定位，當(dāng)出現(xiàn)滾動(dòng)條時(shí)，不隨著滾動(dòng)而滾動(dòng)；
5.sticky:(CSS3)有兼容性問(wèn)題，它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見(jiàn)到的吸附效果。
（二）：關(guān)于position使用一般會(huì)引發(fā)的問(wèn)題
1.假如有一個(gè)默認(rèn)100%寬度的div,一旦加上absolute絕對(duì)定位，該元素立馬inline-block化，默認(rèn)寬度就會(huì)自適應(yīng)元素內(nèi)部寬度，會(huì)導(dǎo)致頁(yè)面的寬高塌陷。
2.由于absolute絕對(duì)定位的靈活性，對(duì)于普通的頁(yè)面布局，有時(shí)出于省事的原因很容易造成absolute/relative/top/left/z-index的濫用,這樣會(huì)使后期的擴(kuò)展和維護(hù)造成麻煩
（三）：position代碼示例
1.relative相對(duì)定位。
對(duì)象2相對(duì)于自身文檔流原來(lái)位置移動(dòng)，并還占據(jù)著文檔流，下面的黃色塊繼續(xù)按照它原來(lái)的位置往下排列，relative僅僅是視覺(jué)上位置變了。
<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px}
#position1 {height: 100px;background: green;}
#position2 {height: 100px;background: blue;position: relative;top: 10px;left: 50px;}
#position3{height: 100px;background: yellow;color: #000}
</style>
<body>
<div class="aa">
<div id="position1">對(duì)象1</div>
<div id="position2">對(duì)象2</div>
<div id="position3">對(duì)象3</div>
</div>
</body>
2.absolute絕對(duì)定位
對(duì)象1absolut屬性相對(duì)于父級(jí)div偏移，脫離文檔流，寬高塌陷，在文檔流之上。
<style>
body{color: #fff;}
.aa{width: 400px;margin: 0 auto;border: 2px solid #000;height: 400px;position: relative;}
#position1 {height: 100px;background: green;position: absolute;top: 10px;left:50px; }
#position2 {height: 100px;background: blue;}
#position3{height: 100px;background: yellow;color: #000}
</style>
</head>
<body>
<div class="aa">
<div id="position1">對(duì)象1</div>
<div id="position2">對(duì)象2</div>
<div id="position3">對(duì)象3</div>
</div>
二、float浮動(dòng)
（一）float的定義
float 屬性定義元素向左/右方向浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
float的值：left/right/none
（二）float實(shí)現(xiàn)文字環(huán)繞
帶有浮動(dòng)屬性的元素也可以使元素inline-block化，具有包裹性，使得元素兼并了塊元素和內(nèi)聯(lián)元素的的優(yōu)點(diǎn)。帶有浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)流進(jìn)行排列布局，脫離標(biāo)準(zhǔn)流后的浮動(dòng)元素漂浮在正常塊元素上面，但是依然占據(jù)正常文檔流的文本空間，使得后面的文本以除了浮動(dòng)元素之外的空間為排列基準(zhǔn)，形成了文本環(huán)繞的效果。
<style>
.a{width: 200px;height: 400px;margin: 0 auto;border: 1px solid #000;}
.pic{float: left;}
p{font-size: 16px;line-height: 18px;font-family: "Microsoft Yahei"}
</style>
</head>
<body>
<div class="a">
<img src="2.jpg" width="100" width="100" class="pic">
<p>這是一段測(cè)試文字啦啦啦啦啦這是一段測(cè)試文字啊啊啊啊啊這是一段文字顯示吶吶吶吶這是一段文字顯示啦啦啦啦啦</p>
</div>
（三）float浮動(dòng)布局
標(biāo)準(zhǔn)文檔流從上到下排列。
div1向左float后，很明顯，高度塌陷，div2和div3和div1重疊。
（四）為什么要清除浮動(dòng)以及清除浮動(dòng)的幾個(gè)方法
由于浮動(dòng)導(dǎo)致元素高度塌陷產(chǎn)生副作用，父級(jí)盒子的邊框不能被撐開(kāi)，背景不能顯示，父子級(jí)間的margin和padding設(shè)置值不能正確被顯示。
<style>
.div1{width: 400px;border: 2px solid #000;}
.div2{width: 100px;height: 100px;background: blue;float: left;}
.div3{width: 100px;height: 100px;background: green;float: right;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
</div>
方法1：在父級(jí)結(jié)束前，添加一個(gè)子標(biāo)簽<div style="clear:both;"></div>
<div class="div1">
<div class="div2">div2</div>
<div class="div3">div3</div>
<div style="clear:both;"></div>
</div>
方法2：在父級(jí)css屬性加上入overflow:hidden;zoom:1;或者overflow:auto;zoom:1;
方法3：在父級(jí)用zoom+:after方法，原理類(lèi)似于clear:both,利用CSS方式：after在元素內(nèi)部加一個(gè)clear:both的元素塊
.box1{zoom:1;}
.box1:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
方法4：對(duì)父級(jí)設(shè)置合適的高度直接撐開(kāi)
（五）float和JavaScript
IE瀏覽器：
obj.style.styleFloat = "left";
其他瀏覽器：
obj.style.cssFloat = "left";
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
css中的position屬性，position有四個(gè)值：absolute/relative/fixed/static(絕對(duì)/相對(duì)/固定/靜態(tài)(默認(rèn)))通過(guò)定位屬性可以設(shè)置一些不規(guī)則的布局，使用TLBR(top,left,bottom,r2020-03-22
css定位position引發(fā)的層級(jí)關(guān)系問(wèn)題詳解
這篇文章主要介紹了css定位position引發(fā)的層級(jí)關(guān)系問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-02-10
詳解css粘性定位position：sticky問(wèn)題采坑
這篇文章主要介紹了詳解css粘性定位position：sticky問(wèn)題采坑的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下2019-08-26
CSS position屬性和實(shí)例應(yīng)用演示
這篇文章主要介紹了CSS position屬性和實(shí)例應(yīng)用演示,absolute（絕對(duì)定位）,relative（相對(duì)定位）,relative與absolute的結(jié)合使用以及fixed(固定定位),需要的朋友可以參考下2017-08-11css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)
下面小編就為大家?guī)?lái)一篇css關(guān)于position屬性的用法詳解(絕對(duì)定位和相對(duì)定位的混淆)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-08
css position fixed 左右雙定位的實(shí)現(xiàn)代碼
這篇文章主要介紹了css position fixed 左右雙定位的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-29
