1.什么是浮动
首先我们先来了解下几种定位方式
普通流定位 static(默认方式): 又称为文档流定位
浮动定位 float : 多个块级元素在一行内显示
固定定位 fixed: 元素相对于浏览器窗口是固定位置,窗口滚动它也不会移动。
相对定位 relative: 可以通过设置垂直或水平位置,让元素相对它的起点进行移动。
绝对定位 absolute: 相对于最近的父元素偏移父元素必须设置了position
粘性定位 sticky:当页面滚动区域大于sticky对应的区域时,和fixed定位一样。
2.浮动的效果(可以解决多个块级元素在一行内显示的问题)
浮动定位元素会被排除在文档流之外,脱离文档流(不占据页面空间),其余的元素要上前补位
浮动元素会停靠在父元素的左边或右边,或停靠在其他已浮动元素的边缘上
浮动元素依然位于父元素之内
注意
1、一行内,显示不下所有的已浮动元素时,最后一个将换行
2、元素一旦浮动起来之后,那么宽度将变成自适应(宽度由内容决定)
3、浮动会变成块级元素
4、行内元素采用环绕的方式排列,是不会被浮动元素压在底下的,会避开浮动元素
3.浮动 影响
浮动元素会脱离文档流,所以导致不占据页面空间,所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素,那么该元素高度将变成0(高度塌陷)
4.如何清除浮动
①给li的父元素ol加一个高度 ol{height:30px}
②在后面加个空div占空 div{clear:both}
③给浮动元素的容器添加 overflow:hidden;或 overflow:auto;或者设置父元素浮动(触发BFC)
④给浮动元素的容器添加一个 clearfix 的 class,添加一个:after 伪元素实现元素末尾添加一个看不见的块元素清理浮动。
clearfix:after { //选择器向选定的元素之后插入内容
content:""; //生成内容为空
display: block; // 生成的元素块级元素显示
clear:both; } //clear:both; 清除前面元素浮动带来的影响
5.BFC
5.BFC
概念: 块级格式化上下文,BFC让空间内的子元素不会影响到外部的布局。
1.块级元素生成的BFC:行内元素和浮动元素不能生成BFC。
2.边距重叠问题:在BFC中,相邻块级元素的垂直边距会发生重叠。
3.浮动元素:BFC中,浮动元素会被包裹在BFC的内部,不会影响到外部的元素的布局。
4.清除浮动:清浮动可以解决浮动对布局造成的影响。比如flex:left清除左浮动影响。
5.BFC内的高度算浮动的高度,所以把父元素设置成BFC,内部可以清浮动
触发
display 为 inline-block、table-cell、table-caption,flex,inline-flex 的元素
overflow: hidden
float 不为 none 的元素 `
position 为 fixed 和 absolute 的元素
BFC解决的问题 (参考https://blog.csdn.net/rain_zhh/article/details/108907843)
1.清浮动
由于两个子元素都浮动,无法撑开父盒子,此时将父盒子设置为BFC规则,就可以了
2.Margin边距重叠
两个盒子之间margin边距重叠,可以在下面的盒子上包裹块元素,让他们不在一个BFC
3.两栏布局
左侧盒子左浮动,右侧盒子文档流覆盖上去了,将第二个div设置成一个BFC就行
总结
清除浮动的方式有很多种,但是实现的原理主要是靠clear属性,和触发新的BFC