1.浮动(float): 属性值: left right float
是元素脱离文档流(文档流另有详解)后,方便进行布局, 想左右排列的元素,例如:li设置浮动后,使其由垂直排列变成水平排列
此时,由于未清除浮动所以出现了父元素高度塌陷
元素浮动后
除inline-table会转成table级元素外,其余元素都会转成display:block 但是这个块级元素并不是真正的块级元素,他只是具备块级元素某些特性,但同时他又具有内联元素的特性,比如不设置宽高时,由内容决定宽高,同样block元素,也会具有行内元素的某些特性,不设置宽高,宽高则有内容去决定
div未浮动之前是块级元素,独占一行
而设置浮动后,div虽然依旧是块元素,但是并不独占一行,如果没有设置宽高,则宽高有内容决定
设置浮动的元素会脱离文档流,提升一个层级,元素会空出原位置,浮动元素不会影响前面的元素,但是会影响后面的元素,浮动并不会影响文本,文本并不会被浮动的元素覆盖,只会围绕在它的周围
浮动后:
可以看出文字并不会被红色方块覆盖,只会围绕在其周
元素浮动之后,并不会受margin垂直方向的层叠性的影响,也不会受垂直方向margin传递问题的影响,元素浮动后,如果父元素宽度不足,浮动元素会自动换行
未设置浮动时,会出现margin传递问题
设置后
1.如果是上下排列的元素,如果不给设置浮动元素的后面的兄弟元素设置clear:both,用来隔离与浮动元素之间的距离,该兄弟元素就会收到受浮动元素的影响,为填补浮动元素留下的空位置,因此可能会整个页面的布局
2.如果是嵌套情况下,并且父元素为以后扩充做考虑并未设置高度,这种情况下,就会产生父元素的高度塌陷,会影响父元素后面的兄弟元素,从而对整个页面的布局产生影响
1.给父元素设置一个高度可以让父元素保持一定高度,从而不会产生浮动塌陷
2.给父元素设置overflow:hidden;(触发BFC机制,BFC在此不进行解释,另有详解)
给父元素添加overflow:hidden,可以清除父元素高度塌陷,也不会影响后面的元素,(使父元素包裹住浮动的元素,用浮动的元素去撑开父元素,用这种方法来解决浮动塌陷)
(https://img-blog.csdnimg.cn/20200223212142142.png)
(主要是应用于溢出隐藏,也可以清除浮动,父元素高度他先问题)
但是,如果有浮动的子元素想溢出,那么就会受影响
例如:子导航栏的显示隐藏,就不能使用overflow:hidden;来清除浮动,如果使用overflow,会把下面隐藏的子元素给隐藏掉,所以不会出现鼠标移入显示,移除隐藏的效果
3.让父元素也一同进行浮动,但是会影响后面的元素,从而影响整个页面的布局
4.将父元素设置成inline-block,有缺陷,此时,父元素的宽高完全有子元素的多少来决定,可能会影响布局
5.在子元素的最后添加一个空标签,利用上下排列的情形,使用clear:noth;使空标签不受浮动元素的影响,从而撑开父元素,这种方法,不利用后期维护,添加的空标签过多
6.使用伪类在元素清除浮动,因为::after等伪类元素默认为内联元素,所以需要先将其转为块级元素再使用clear进行清除
clear::after{
content:""
display:block;
clear:both;
}
使用伪元素清除高度塌陷,不会对整个布局产生影响,而且可以它是以类的形式,可以重复使用,可以清除多个浮动,而不用重复添加
2.定位(position): 属性值 static(默认值) absolute(绝对定位) relative(相对定位) fixed(固定定位) sticky(粘性定位)
使用position来确定元素的定位方式,任何元素都可以使用定位,但在使用绝对定位和固定定位之后,会改变元素原有的的类型。
1.绝对定位 absolute 设置该值后,会是元素脱离文档流,会使元素的类型进行转换,与float是相同的。同时绝对定位是相对于离其自身最近且定位方式不为static的祖先元素进行定位的。如果祖先元素没有设置定位方式,则其相对于根进行定位
如果设置偏移量后,会对其他元素产生影响, 如果不给使用absolute元素的父元素,添加高度,会造成高度塌陷
使设置绝对定位的元素,在父元素中居中,
1) .element{
width:100px;
height:100px;
position:absolute;
left:0;right:0;
top:0;
bottom:0;
margin:0 auto;
}
2).element{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
2.relative 相对定位 相对对位是相对与元素本身进行定位,并且不会脱离文档流(文档流同上),相对定位的基点,是自身的左上角
相对定位跟margin很像,但是使用margin的元素会影响到会面的兄弟元素,而使用,相对定位则不会出现这样的问题。
相对定位与绝对定位ablsolute在偏移量上也是有区别的,在同一方向的偏移量上只有一个能够生效,因为文档流默认的是自上而下,自左往右,所以在同时使用top/bottom是,top会生效,left会生效。
但是在使用百分比作为偏移量的时候需要注意,百分比是根据父元素的值来计算的,如果父元素是atuo则该百分比是不生效的,相当于值为零
但在使用定位时,尽量不要使用relative相对定位来对像素进行定位,一般主要应用于对ablsolute来进行包裹性和定位性的限制
3.fixed 固定定位
固定定位也会使元素脱离文档流,也会对元素的类型进行转换,但是,固定定位只会相对于根进行定位,不会受到祖先元素和滚动条的影响
可以应用于网页中的蒙层弹窗
4.粘性定位 sticky
使元素滚动一定距离后,变成固定定位,定在该位置
某一元素设置了粘性定位,设置了一个top:xx,随着页面的滚动,当页面滚动到该元素,距离顶端,xx距离后,该元素,便不再随着页面的滚动,而变成了固定定位固定在那里