一 : 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失效
