浮动 (浮起来 脱离标准流布局)
具有行内块元素相似的特性
元素值 | 作用 |
---|---|
left | 元素浮动到其容器的左侧 |
right | 元素浮动在其容器的右侧 |
none | 元素不会浮动(将显示在文本中刚出现的位置)。默认值 |
练习1
<head>
<meta charset="UTF-8">
<title>布局</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ff6700;
}
.c {
float: left;
}
.l {
float: left;
}
.r {
float: right;
}
.father {
width: 300px;
height: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
标准流 布局:<br>
块元素独占一行 从上到下 <br>
行内元素从左到右 碰到父元素边缘换行 <br>
父元素标准流实现居中
浮动:<br>
<div class="father">
<div class="l">1</div>
<div class="r">2</div>
<div class="c">3</div>
</div>
</body>
清除浮动:有时候父容器不方便给定高度,而浮动不占位置导致 父容器高度为0
清除浮动后,父容器会根据子容器得出高度,就不会影响下面的标准流盒子(前提父盒子没给定高度)
clear:
- none - 允许两侧都有浮动元素。默认值
- left - 左侧不允许浮动元素
- right- 右侧不允许浮动元素
- both - 左侧或右侧均不允许浮动元素
方法:
方法 | 举例 |
---|---|
额外标签法 | 在浮动标签末尾添加一个空元素(br 或者不能是行内元素)调用clear :none |
父级添加overflow | hidden auto scoll |
父级添加:after伪元素 | 如下 |
<style>.clearfix :after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*ie 6 7*/
*zoom:1;
}</style>
- 定位 可以让盒子自由的在某个盒子内移动或者固定屏幕中的某个位置,并且可以压住盒子。
- 定位=定位模式+边偏移
- 定位模式
模式 | 语义 | 作用 |
---|---|---|
static | 静态定位 | 无定位的意思,元素默认的定位方式 |
relative | 相对 | 元素移动位置的时候,相对它原来的位置移动,原来位置继续占有 |
absolute | 绝对 | 移动时候相对于最近一级有定位的祖先元素来说,没有祖先元素或者祖先元素没有定位则相对文档,不再占有原有位置 |
fixed | 固定 | 相对于浏览器得可视窗口,不占位置 |
sticky | 粘性定位 | 相对于固定的结合 |
- 子绝父相: 子元素用绝对时定位父得用相对定位 好处子不会占有位置不会影响兄弟元素
- 如果有重叠用z-index :x 控制顺序
- 加了绝对定位的盒子不能通过margin: 0 auto 来水平居中 可以通过 left:50%;margin:-xpx; x 盒子自身的一半