【CSS】块级元素不清除浮动导致相邻元素不居中显示

引入

在一次页面制作的时候，发生了一件匪夷所思的事情，使用css的text-align: center;属性企图让元素内文本水平居中，但是如图设置后文本并没有完全居中，然后无论怎么修改都无法使其水平居中

经过一行行查找，发现相邻元素的行高linge-height竟然可以影响到本元素，如图：

修改后：

可见取消相邻元素行高后，该元素文本确实水平居中了，但是这种拆东墙补西墙的方法又出现了另一个问题。。。。。

最后经过排查发现是相邻元素中的子元素使用了浮动所以导致了该bug的产生，如图去掉相邻元素中子元素浮动，对本元素样式影响消失

所以解决方法就是清除浮动，清除是指清除浮动后所造成的影响（并不是清除浮动），如图是一种清除浮动的方法，清除浮动后两个元素样式都达到了预期

清除浮动方法

清除是指清除浮动后所造成的影响（并不是清除浮动）

清除主要解决父元素因为子元素浮动引起内部高度为0的问题。

清除浮动后，父元素就会根据子元素自动检测高度，父元素有了高度就不会影响下边的标准流

不清除浮动与父元素相邻元素将使用同一行高line-height

标准流子元素

实际开发中，父盒子不方便给高度（无法确定子元素内容有多少），有多少高度看子元素撑开多少

子元素浮动

子元素浮动，导致脱离标准流，而且父元素没有高度相当于height=0，父元素下面的文档流会移动到下侧

清除浮动方法

清除浮动的本质

父元素没有高度的话，子元素设置浮动脱离了文档流，导致父元素没有被撑开，没有高度，父元素下方的元素会向上移动

清除浮动是防止下面的元素移动到设置浮动标签的下面

清除浮动诱因

1. 父元素无高度
2. 子盒子设置了浮动（标准流会撑开无高度父元素）
3. 影响了下面布局

clear属性

使用clear属性清除浮动

取值

额外标签法（隔墙法）

在最后一个浮动元素（浮动元素末尾），添加一个空标签，并给空标签设置css属性clear

父级添加overflow属性

给浮动元素的父元素设置属性overflow为hidden（溢出隐藏）

缺点

在父元素设置高度时，会自动清除超出部分

内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

：after是指生成新元素放在标签内部的末尾，（结构上不可见）
在父元素调用类

双伪元素清除浮动

：before，：after{ }

生成新元素放在标签内部的前面和末尾，（结构上不可见）