H5前端基础------布局

浮动

使用float来设置元素浮动

可选值
none
默认值，不浮动，元素在文档流中
left
元素向左浮动
right
元素向右浮动

特点
1.元素浮动以后会完全脱离文档流
2.浮动以后元素会一直向父元素的最上方移动
3.直到遇到父元素的边框或者其他的浮动元素，会停止移动
4.如果浮动元素的上边是一个块元素，则浮动元素不会覆盖块元素
5.浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
6.浮动元素不会覆盖文字，文字会自动环绕在浮动元素的周围，可以通过浮动来实现文字环绕的效果
浮动以后元素的特点
元素浮动以后，会使其完全脱离文档流。
块元素
块元素脱离文档流以后
1.不会独占一行
2.宽度和高度都被内容撑开
内联元素
内联元素脱离文档流以后会变成块元素

高度塌陷
父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置将会上移，导致整个页面的布局混乱
方法一
开启父元素的BFC或hasLayout
BFC
Block Formatting Context
块级格式化环境
BFC是元素的隐含属性，默认是在关闭状态的
可以通过一些特殊的样式，来开启BFC
开启BFC以后元素将会具有如下特性
1、父元素的垂直外边距不会与子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动子元素
开启BFC的方式
1.设置元素浮动
2.设置元素绝对定位
3.设置元素的类型为inline-block
4.设置overflow为一个非默认值
一般都是使用overflow:hidden来开启BFC
hasLayout
在IE6中没有BFC，但是有一个和BFC类似的hasLayout
在IE6中可以通过开启hasLayout来解决高度塌陷的问题
副作用最小的开启方式
zoom:1
当为元素设置宽度非默认值时，会自动开启hasLayout
方法二
在塌陷的父元素的最后添加一个空白的div，然后对该div进行清除浮动
使用这种方式会在页面中添加多余的结构
方法三
使用after伪类，向父元素后添加一个块元素，并对其清除浮动
该种方式的原理和方法二原理一样，但是不用向页面中添加对于的结构

定位
通过定位可以将页面中的元素，摆放到页面的任意位置

使用position来设置元素的定位
可选值
static
默认值，元素没有开启定位
relative
开启元素的相对定位
absolute
开启元素的绝对定位
fixed
开启元素的固定定位
相对定位
1.开启元素的相对定位后，如果不设置偏移量元素不会发生任何变化
2.相对定位元素相对于其自身在文档流中的位置来定位
3.相对定位的元素不会脱离文档流
4.相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
5.相对定位的元素会提升一个层级

绝对定位
1.元素设置绝对定位以后，如果不设置偏移量，元素的位置不会发生变化
2.绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没开启定位，则相对于浏览器窗口进行定位。
3.绝对定位的元素会完全脱离文档流
4.绝对定位会改变元素的性质。内联变块，块的高度和宽度都被内容撑开，并且不独占一行
5.绝对定位会使元素提升一个层级

固定定位
固定定位是一种特殊的绝对定位，它的特点大部分都和绝对定位一样
不同的是，固定定位的元素永远都是相对于浏览器窗口进行定位的。并且他不会随滚动条滚动
IE6不支持固定定位

层级
定位元素 > 浮动元素 > 文档流中的元素
当元素开启了定位以后，可以通过z-index来设置元素的层级
z-index值越高元素越优先显示
如果z-index值一样，或者都没有z-index则优先显示下边的元素
父元素永远不会盖住子元素
偏移量
当元素开启了定位以后，可以通过偏移量来设置元素的位置
left
元素距离定位位置的左侧距离
top
元素距离定位位置的上边距离
right
元素距离定位位置的右侧距离
bottom
元素距离定位位置的底部距离
一般情况下，只使用两个值即可定义一个元素的位置。
————————————————
版权声明：本文为CSDN博主「醉墨重生」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_24675479/article/details/78060218