浮动
一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐 如果没有足够的水平空间来浮动,它会向下移动,直到空间合适或者不会再出现其它浮动了
因为浮动(盒)不在普通流内,在浮动盒之前或者之后创建的未定位的(non-positioned)块盒会竖直排列,就像浮动不存在一样。然而,接着(next to)浮动(盒)创建的当前及后续行盒会进行必要的缩短,为了给浮动(盒)的margin box让出空间
float属性最初只用于在成块的文本内浮动图像,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。但是现在它已成为在网页上创建多列布局的最常用工具之一。
浮动float
属性有两个值,left和right,分别是左浮动和右浮动。
浮动的例子
当三个盒子浮动时,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
当宽度不够时,放不下就会换行。
被卡住的情况:如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”。
清除浮动
使用浮动后,会出现一些问题:
- 对后续元素位置产生影响
- 父容器高度计算出问题
清除浮动:
1.应用clear
属性,clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
2.使用伪元素,给包含浮动元素的容器设置 clearfix。
.clearfix::after {
content:'';
display: block;
clear: both;
}
用inline-block还是浮动
- inline-block 优势: 不需要清除浮动,简单,在设置居中时更方便,适合子内容不多的元素水平排列
- inline-block 劣势: 需要注意缝隙,注意对齐,ie8以下不能用
- float优势: 兼容性好,没缝隙问题
- float劣势: 需要清除浮动,适合稍大的布局
定位
定位允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
静态定位
position: static
默认值 默认的布局方式。
相对定位
相对定位就是“相对自己定位”。
position: relative
相对默认的布局位置进行定位。可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
.box {
position: relative;
top:20px;
left:30px;
}
如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
绝对定位
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index
属性来控制这些框的堆放次序。z-index
的值为数值,数值大的覆盖数值低的。
固定定位
position: fixed
相对浏览器窗口进行定位。因此当滚动产生时,固定定位元素依然处于窗口的某个固定位置。
.feedback {
right: 30px;
bottom: 30px;
position: fixed;
}
网友评论