浮动,定位及清浮动的几大解决方法及BFC

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

参考:详解 清除浮动 的多种方式（clearfix）_clearfix::list_FEWY的博客-CSDN博客