一 : float/絕對定位/固定定位 可以讓元素默認轉換為行內塊元素
元素的大小完全取決于定義的大小或者默認的內容多少,浮動根據元素書寫的位置來顯示相應的浮動。
只給盒子一個高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
效果
當我們添加float,絕對定位,固定定位盒子時候,默認轉化為行內塊,假如不給寬度,盒子大小與內容大小相同.
效果
二 : 清除浮動的幾種方式
其實本質叫做閉合浮動
- 額外標簽法
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如
<div style=”clear:both”></div>
，或則其他標簽br等亦可。
- 父級添加overflow屬性方法
可以給父級添加： overflow為 hidden|auto|scroll 都可以實現。
- 使用after偽元素清除浮動
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 專有 */
- 使用before和after雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 這句話可以出發BFC BFC可以清除浮動*/
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
三 : 定位盒子居中問題
-
盒子添加
float導致margn:auto失效
浮動是左對齊,添加后與margn:auto同時產生效果,只產生浮動效果
原效果代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test3</title>
<style>
div{
background-color: pink;
width: 200px;
height: 200px;
margin: 100px auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
效果
添加float后代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test3</title>
<style>
div{
background-color: pink;
width: 200px;
height: 200px;
margin: 100px auto;
float: left;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
添加后效果
效果
-
盒子添加
絕對定位導致margn:auto失效
與上述float相同,加了position: absolute;也會使margn:auto失效
